fix: add markdown rendering error handling and debug logs

This commit is contained in:
大森 2026-05-10 15:45:58 +08:00
parent 8a2b5a0d5d
commit 29f1e172b4

View File

@ -6,9 +6,9 @@ const indexHTML = `<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>orca.agent</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" onload="console.log('marked loaded')" onerror="console.error('marked failed to load')"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" onload="console.log('hljs loaded')" onerror="console.error('hljs failed to load')"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -368,19 +368,50 @@ const indexHTML = `<!DOCTYPE html>
let currentAssistantDiv = null;
let eventSource = null;
let currentContent = '';
let mdAvailable = false;
marked.setOptions({
highlight: function(code, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(code, { language: lang }).value;
} catch (e) {}
}
return hljs.highlightAuto(code).value;
},
breaks: true,
gfm: true
});
function initMarked() {
if (typeof marked === 'undefined') {
console.error('marked.js not loaded, using plain text fallback');
mdAvailable = false;
return;
}
mdAvailable = true;
try {
marked.setOptions({
highlight: function(code, lang) {
if (typeof hljs !== 'undefined' && lang && hljs.getLanguage(lang)) {
try { return hljs.highlight(code, { language: lang }).value; } catch (e) {}
}
if (typeof hljs !== 'undefined') {
try { return hljs.highlightAuto(code).value; } catch (e) {}
}
return code;
},
breaks: true,
gfm: true
});
console.log('marked.js initialized successfully');
const test = marked.parse('# Hello\n\nThis is **bold** text.');
console.log('Markdown test result:', test.substring(0, 100));
} catch (e) {
console.error('Failed to initialize marked:', e);
mdAvailable = false;
}
}
initMarked();
function renderMarkdown(text) {
if (!mdAvailable || !text) return text;
try {
return marked.parse(text);
} catch (e) {
console.error('Markdown parse error:', e);
return text;
}
}
function connectSSE() {
eventSource = new EventSource('/api/stream');
@ -390,11 +421,14 @@ const indexHTML = `<!DOCTYPE html>
});
eventSource.onmessage = function(e) {
console.log('SSE data received:', e.data.substring(0, 50) + '...');
if (currentAssistantDiv) {
currentContent += e.data;
const content = currentAssistantDiv.querySelector('.message-content');
content.innerHTML = marked.parse(currentContent);
hljs.highlightAll();
content.innerHTML = renderMarkdown(currentContent);
if (typeof hljs !== 'undefined') {
hljs.highlightAll();
}
chatBox.scrollTop = chatBox.scrollHeight;
}
};
@ -429,7 +463,7 @@ const indexHTML = `<!DOCTYPE html>
if (role === 'user') {
text.textContent = content;
} else {
text.innerHTML = marked.parse(content);
text.innerHTML = renderMarkdown(content);
}
div.appendChild(label);
@ -437,7 +471,7 @@ const indexHTML = `<!DOCTYPE html>
chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
if (role !== 'user') {
if (role !== 'user' && typeof hljs !== 'undefined') {
hljs.highlightAll();
}