bug fixes, and performance improvements, and drawer

app/components/Message/Agent/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { collectCitationSources } from '~/utils/citations';
+import type { SearchSource } from '~/utils/tool-rendering';
 import Error from './Error.vue';
 import Reasoning from './Reasoning.vue';
-import Text from './Text.vue';
 import Tool from './Tool/index.vue';
 import type { MessageEntity } from '~/composables/useChat';
 
@@ -9,6 +10,14 @@ const props = defineProps<{
     message: MessageEntity
 }>();
 
+const EMPTY_SOURCES: ReadonlyMap<string, SearchSource> = new Map();
+
+// Citation markers are rare; avoid JSON-parsing every tool output when none exist.
+const sources = computed(() => {
+    const parts = props.message.parts ?? [];
+    const hasCitations = parts.some(part => part.type === 'text' && part.content?.includes('[[cite:') === true);
+    return hasCitations ? collectCitationSources(parts) : EMPTY_SOURCES;
+});
 const triggerRef = ref<HTMLElement | null>(null);
 
 const { open, close, isOpen } = useTokenDropdown();
@@ -25,14 +34,17 @@ const toggleTokenDropdown = () => {
 
 <template>
     <div class="flex flex-col w-full gap-2">
-        <div v-for="part in message.parts?.filter(p => p.content?.trim() !== '' || p.toolCall)" :key="part.id">
-            <Reasoning v-if="part.type === 'reasoning'" :part="part" />
-            <Text v-else-if="part.type === 'text'" :part="part" />
-            <Tool v-else-if="part.type === 'tool-call'" :tool-call="part.toolCall!" :part="part"></Tool>
-            <div v-else>
-                Unhandled part type: {{ part.type }} {{ part }}
-            </div>
-        </div>
+        <template v-for="part in message.parts" :key="part.id">
+            <template v-if="part.content?.trim() !== '' || part.toolCall">
+                <Reasoning v-if="part.type === 'reasoning'" :part="part"></Reasoning>
+                <MarkdownRenderer v-else-if="part.type === 'text'" :finished="part.finished" :id="part.id"
+                    :content="part.content!" :sources="sources" :citations="true"></MarkdownRenderer>
+                <Tool v-else-if="part.type === 'tool-call'" :tool-call="part.toolCall!" :part="part"></Tool>
+                <div v-else>
+                    Unhandled part type: {{ part.type }} {{ part }}
+                </div>
+            </template>
+        </template>
 
         <span class="flex items-center gap-1"
             v-if="message.generation?.status === 'pending' && (message.parts || []).length === 0">