bug fixes, and performance improvements, and drawer

app/components/Markdown/Renderer.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import type { MarkdownAstNode, MarkdownElementNode } from '~/utils/markdown';
-import { createMarkdownParser, getNodeAttributes, getNodeChildren, getNodeTag, splitParagraphBreaks, textContent, toVueAttributes } from '~/utils/markdown';
-import { createTextVNode, h, ref, watch } from 'vue';
+import type { MarkdownAstNode } from '~/utils/markdown';
+import { agentParser, userParser, getNodeAttributes, getNodeChildren, getNodeTag, splitParagraphBreaks, textContent, toVueAttributes } from '~/utils/markdown';
+import { createTextVNode, h, shallowRef, watch } from 'vue';
+import type { SearchSource } from '~/utils/tool-rendering';
+import SourceCitation from './SourceCitation.vue';
 import MarkdownMath from './Math.vue';
 import MarkdownShikiHighlight from './ShikiHighlight.vue';
 
@@ -9,15 +11,19 @@ const props = defineProps<{
     content: string;
     finished: boolean;
     id: string;
+    sources?: ReadonlyMap<string, SearchSource>;
+    citations?: boolean;
 }>();
 
-const parser = createMarkdownParser();
+const parser = props.citations ? agentParser : userParser;
 const parse = async (content: string, finished: boolean) => {
     const tree = await parser(content, { streaming: !finished });
+    // Copy-on-write: br-free trees return by reference with no allocation.
     return splitParagraphBreaks(tree);
 };
 
-const parsed = ref(await parse(props.content, props.finished));
+// Parsed trees are replaced, never mutated. Avoid proxying every AST node.
+const parsed = shallowRef(await parse(props.content, props.finished));
 let parseVersion = 0;
 
 watch(
@@ -46,6 +52,11 @@ const renderNode = (node: MarkdownAstNode, path: string): any => {
 
     const tag = getNodeTag(node);
     const attributes = getNodeAttributes(node);
+    if (tag === 'source-cite') {
+        const ids = typeof attributes.ids === "string" ? attributes.ids.split(",") : [];
+        return h(SourceCitation, { key: path, ids, sources: props.sources });
+    }
+
     if (tag === 'pre') {
         const language = typeof attributes.language === 'string' ? attributes.language : 'text';
         return h(MarkdownShikiHighlight, {
@@ -79,9 +90,7 @@ const render = () => {
         .map((node, index) => renderNode(node, `${props.id}.${index}`))
         .filter((child) => child !== null);
 
-    return h('div', { class: 'prose-wrapper' }, [
-        h('article', { class: 'markdown-body' }, children),
-    ]);
+    return h('article', { class: 'prose-wrapper markdown-body' }, children);
 };
 </script>