@qnote/q-ai-note 1.0.11 → 1.0.12

package/dist/web/app.js

@@ -776,8 +776,49 @@ function populateParentSelect(items, preferredParentId = null) {
   select.value = hasExpectedValue ? expectedValue : '';
 }
 
-function renderMarkdownSnippet(text) {
-  const source = String(text || '').replace(/\r\n/g, '\n');
+function normalizeAssistantResponseText(raw) {
+  let text = String(raw || '').trim();
+  if (!text) return '';
+  // Recover nested response payload when parser fallback returns a JSON string.
+  for (let depth = 0; depth < 2; depth += 1) {
+    const maybeJson = text.trim();
+    if (!maybeJson.startsWith('{') || !maybeJson.endsWith('}')) break;
+    try {
+      const parsed = JSON.parse(maybeJson);
+      if (parsed && typeof parsed.response === 'string' && parsed.response.trim()) {
+        text = String(parsed.response).trim();
+        continue;
+      }
+    } catch {
+      // Ignore invalid json and keep original text.
+    }
+    break;
+  }
+  return text;
+}
+
+function unwrapMarkdownFence(rawText) {
+  const text = String(rawText || '').replace(/\r\n/g, '\n').trim();
+  const start = text.match(/^```(?:markdown|md)\s*\n?/i);
+  if (!start) return null;
+  let body = text.slice(start[0].length);
+  const endIdx = body.lastIndexOf('\n```');
+  if (endIdx >= 0) {
+    body = body.slice(0, endIdx);
+  } else {
+    body = body.replace(/```$/m, '');
+  }
+  return body.trim();
+}
+
+function renderMarkdownSnippet(text, options = {}) {
+  const enableMermaid = Boolean(options.enableMermaid);
+  const normalizedSource = normalizeAssistantResponseText(text);
+  const fencedMarkdown = unwrapMarkdownFence(normalizedSource);
+  if (fencedMarkdown !== null) {
+    return renderMarkdownSnippet(fencedMarkdown, options);
+  }
+  const source = String(normalizedSource || '').replace(/\r\n/g, '\n');
   const lines = source.split('\n');
   const blocks = [];
   let listItems = [];
@@ -801,12 +842,61 @@ function renderMarkdownSnippet(text) {
     return html;
   };
 
-  for (const line of lines) {
+  const splitTableCells = (line) => {
+    let raw = String(line || '').trim();
+    if (raw.startsWith('|')) raw = raw.slice(1);
+    if (raw.endsWith('|')) raw = raw.slice(0, -1);
+    return raw.split('|').map((cell) => String(cell || '').trim());
+  };
+
+  for (let idx = 0; idx < lines.length; idx += 1) {
+    const line = lines[idx];
     const trimmed = line.trim();
     if (!trimmed) {
       flushList();
       continue;
     }
+    const fenceMatch = trimmed.match(/^```([a-zA-Z0-9_-]+)?\s*$/);
+    if (fenceMatch) {
+      flushList();
+      const fenceLang = String(fenceMatch[1] || '').toLowerCase();
+      const codeLines = [];
+      idx += 1;
+      while (idx < lines.length && !/^```/.test(String(lines[idx] || '').trim())) {
+        codeLines.push(lines[idx]);
+        idx += 1;
+      }
+      const code = codeLines.join('\n');
+      if (fenceLang === 'mermaid' && enableMermaid) {
+        blocks.push(`<div class="chat-mermaid" data-mermaid-code="${encodeURIComponent(code)}"></div>`);
+      } else {
+        blocks.push(`<pre><code>${safeText(code)}</code></pre>`);
+      }
+      continue;
+    }
+    if (trimmed.includes('|') && idx + 1 < lines.length) {
+      const nextTrimmed = String(lines[idx + 1] || '').trim();
+      const isTableDivider = /^\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?$/.test(nextTrimmed);
+      if (isTableDivider) {
+        flushList();
+        const headerCells = splitTableCells(trimmed);
+        const bodyRows = [];
+        idx += 2;
+        while (idx < lines.length) {
+          const row = String(lines[idx] || '').trim();
+          if (!row || !row.includes('|')) {
+            idx -= 1;
+            break;
+          }
+          bodyRows.push(splitTableCells(row));
+          idx += 1;
+        }
+        const headerHtml = `<tr>${headerCells.map((cell) => `<th>${renderInline(cell)}</th>`).join('')}</tr>`;
+        const bodyHtml = bodyRows.map((cells) => `<tr>${cells.map((cell) => `<td>${renderInline(cell)}</td>`).join('')}</tr>`).join('');
+        blocks.push(`<table class="md-table"><thead>${headerHtml}</thead><tbody>${bodyHtml}</tbody></table>`);
+        continue;
+      }
+    }
     if (/^[-*]\s+/.test(trimmed)) {
       listItems.push(renderInline(trimmed.replace(/^[-*]\s+/, '')));
       continue;
@@ -824,6 +914,73 @@ function renderMarkdownSnippet(text) {
   return blocks.join('');
 }
 
+let mermaidLoadPromise = null;
+
+function ensureMermaidRuntime() {
+  if (window.mermaid && typeof window.mermaid.render === 'function') {
+    return Promise.resolve(window.mermaid);
+  }
+  if (mermaidLoadPromise) return mermaidLoadPromise;
+  mermaidLoadPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[data-mermaid-runtime="1"]');
+    if (existing) {
+      existing.addEventListener('load', () => {
+        if (window.mermaid && typeof window.mermaid.initialize === 'function') {
+          window.mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+        }
+        resolve(window.mermaid);
+      }, { once: true });
+      existing.addEventListener('error', () => reject(new Error('Mermaid script load failed')), { once: true });
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
+    script.async = true;
+    script.setAttribute('data-mermaid-runtime', '1');
+    script.addEventListener('load', () => {
+      if (window.mermaid && typeof window.mermaid.initialize === 'function') {
+        window.mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+      }
+      resolve(window.mermaid);
+    }, { once: true });
+    script.addEventListener('error', () => reject(new Error('Mermaid script load failed')), { once: true });
+    document.head.appendChild(script);
+  });
+  return mermaidLoadPromise;
+}
+
+async function renderMermaidInContainer(container) {
+  if (!(container instanceof HTMLElement)) return;
+  const blocks = Array.from(container.querySelectorAll('.chat-mermaid[data-mermaid-code]:not([data-mermaid-rendered="1"])'));
+  if (!blocks.length) return;
+  let mermaid = null;
+  try {
+    mermaid = await ensureMermaidRuntime();
+  } catch {
+    mermaid = null;
+  }
+  for (let idx = 0; idx < blocks.length; idx += 1) {
+    const block = blocks[idx];
+    const code = decodeURIComponent(String(block.getAttribute('data-mermaid-code') || ''));
+    if (!code) {
+      block.setAttribute('data-mermaid-rendered', '1');
+      continue;
+    }
+    if (mermaid && typeof mermaid.render === 'function') {
+      try {
+        const id = `chat-mermaid-${Date.now()}-${idx}`;
+        const rendered = await mermaid.render(id, code);
+        block.innerHTML = rendered?.svg || `<pre><code>${safeText(code)}</code></pre>`;
+      } catch {
+        block.innerHTML = `<pre><code>${safeText(code)}</code></pre>`;
+      }
+    } else {
+      block.innerHTML = `<pre><code>${safeText(code)}</code></pre>`;
+    }
+    block.setAttribute('data-mermaid-rendered', '1');
+  }
+}
+
 function getNodeById(nodeId) {
   return state.currentSandbox?.items?.find((item) => item.id === nodeId) || null;
 }
@@ -1601,9 +1758,10 @@ async function loadSandboxChats(sandboxId) {
     chats.map((chat) => renderChatEntry(chat, {
       safeText,
       renderAIActionMessage,
-      renderContent: (content) => renderMarkdownSnippet(content),
+      renderContent: (content) => renderMarkdownSnippet(content, { enableMermaid: true }),
     })),
   );
+  await renderMermaidInContainer(messages);
   
   messages.scrollTop = messages.scrollHeight;
 }
@@ -1635,7 +1793,7 @@ function renderAIActionMessage(action) {
   };
   
   if (actionType === 'response' || actionType === 'clarify') {
-    return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`;
+    return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '', { enableMermaid: true })}</div>`;
   }
   else if (actionType === 'confirm' && action.confirm_items) {
     // Skip confirm, go directly to done
@@ -1662,7 +1820,7 @@ function renderAIActionMessage(action) {
     </div>`;
   }
   
-  return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || '')}</div>`;
+  return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || '', { enableMermaid: true })}</div>`;
 }
 
 window.undoOperation = async function(operationId, btn) {
@@ -2666,7 +2824,8 @@ async function initApp() {
     const actionType = action.action;
     
     if (actionType === 'response' || actionType === 'clarify') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '', { enableMermaid: true })}</div>`);
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       
       if (actionType === 'clarify') {
@@ -2754,11 +2913,13 @@ async function initApp() {
     }
     else if (actionType === 'done') {
       messages.insertAdjacentHTML('beforeend', renderAIActionMessage(action));
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       state.pendingAction = null;
     }
     else if (actionType === 'stop') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.observation || '已取消操作')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.observation || '已取消操作', { enableMermaid: true })}</div>`);
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       state.pendingAction = null;
     }

package/dist/web/styles.css

@@ -1204,6 +1204,65 @@ h2 {
   border-bottom-left-radius: 4px;
 }
 
+.chat-message.assistant h1,
+.chat-message.assistant h2,
+.chat-message.assistant h3,
+.chat-message.assistant h4 {
+  margin: 2px 0 6px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.chat-message.assistant h1 {
+  font-size: 16px;
+}
+
+.chat-message.assistant h2 {
+  font-size: 15px;
+}
+
+.chat-message.assistant h3,
+.chat-message.assistant h4 {
+  font-size: 14px;
+}
+
+.chat-message.assistant p,
+.chat-message.assistant ul,
+.chat-message.assistant ol,
+.chat-message.assistant pre {
+  margin: 4px 0;
+}
+
+.chat-message.assistant .md-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 6px 0;
+  font-size: 12px;
+}
+
+.chat-message.assistant .md-table th,
+.chat-message.assistant .md-table td {
+  border: 1px solid #d5deed;
+  padding: 4px 6px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.chat-message.assistant .md-table th {
+  background: #eef4ff;
+  font-weight: 600;
+}
+
+.chat-message.assistant .chat-mermaid {
+  width: 100%;
+  overflow-x: auto;
+  background: #fff;
+  border: 1px solid #d5deed;
+  border-radius: 8px;
+  padding: 6px;
+  margin: 6px 0;
+}
+
 .chat-message.assistant.loading {
   color: var(--text-secondary);
   font-style: italic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "description": "AI-assisted personal work sandbox and diary system",
   "main": "dist/server/index.js",