bug fixes, and performance improvements, and drawer

2026-09-27 18:44:51 -05:00
parent d48d8163a7
commit 2b9f8d64d7
52 changed files with 4913 additions and 778 deletions
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { MessagePart } from '~/composables/useChat';
+import ReasoningBody from './ReasoningBody.vue';

 const props = defineProps<{
    part: Readonly<MessagePart>;
 }>();

 const reasoningOpen = ref(!props.part.finished);
+const bodyRef = ref<InstanceType<typeof ReasoningBody> | null>(null);

 watch(
    () => props.part.finished,
@@ -14,44 +16,14 @@ watch(
    },
 );

-const containerRef: Ref<HTMLDivElement | null> = ref(null);
-const scrollState = ref('middle');
-
-const { scrollToBottom } = useAutoScroll(containerRef);
-
-const handleScroll = () => {
-    if (!containerRef.value) return;
-
-    const container = containerRef.value;
-    const scrollTop = container.scrollTop;
-    const scrollHeight = container.scrollHeight;
-    const clientHeight = container.clientHeight;
-
-    const topThreshold = 0.02 * clientHeight;
-
-    if (scrollHeight <= clientHeight) {
-        // the container does not have enough content to scroll
-        scrollState.value = '';
-        return;
-    }
-
-    if (scrollTop <= topThreshold) {
-        scrollState.value = 'top';
-    } else if (scrollTop + 100 >= scrollHeight - clientHeight) {
-        scrollState.value = 'bottom';
-    } else {
-        scrollState.value = 'middle';
-    }
-};
-
 const toggleReasoning = async () => {
    if (!props.part.finished) return;

    reasoningOpen.value = !reasoningOpen.value;
    if (!reasoningOpen.value) return;
    await nextTick();
-    scrollToBottom('instant');
-    handleScroll();
+    bodyRef.value?.scrollToBottom('instant');
+    bodyRef.value?.handleScroll();
 };

 const formatDuration = (ms: number) => {
@@ -91,11 +63,6 @@ const formatDuration = (ms: number) => {
            <span class="i-mynaui-chevron-down w-4 h-4 text-[var(--text-secondary)]"
                :class="reasoningOpen ? '' : '-rotate-90'"></span>
        </button>
-        <div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
-            :class="['reasoning-container max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
-            <div class="p-2">
-                <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
-            </div>
-        </div>
+        <ReasoningBody v-if="reasoningOpen" ref="bodyRef" :part="part" />
    </div>
 </template>
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { MessagePart } from '~/composables/useChat';
+import { nextTick, onMounted, ref, watch, type Ref } from 'vue';
+
+const props = defineProps<{
+    part: Readonly<MessagePart>;
+}>();
+
+const containerRef: Ref<HTMLDivElement | null> = ref(null);
+const scrollState = ref('');
+
+const { scrollToBottom } = useAutoScroll(containerRef);
+
+const handleScroll = () => {
+    if (!containerRef.value) {
+        return;
+    }
+
+    const container = containerRef.value;
+    const scrollTop = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+
+    if (scrollHeight <= clientHeight) {
+        scrollState.value = '';
+        return;
+    }
+
+    const threshold = Math.max(6, 0.02 * clientHeight);
+
+    if (scrollTop <= threshold) {
+        scrollState.value = 'top';
+    } else if (scrollTop >= scrollHeight - clientHeight - threshold) {
+        scrollState.value = 'bottom';
+    } else {
+        scrollState.value = 'middle';
+    }
+};
+
+onMounted(() => {
+    nextTick(() => {
+        handleScroll();
+    });
+});
+
+watch(
+    () => props.part.content,
+    () => {
+        nextTick(() => {
+            handleScroll();
+        });
+    },
+);
+
+defineExpose({ scrollToBottom, handleScroll });
+</script>
+
+<template>
+    <div ref="containerRef" @scroll="handleScroll"
+        :class="['reasoning-container max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
+        <div class="p-2">
+            <MarkdownRenderer :finished="props.part.finished" :id="props.part.id" :content="props.part.content!" />
+        </div>
+    </div>
+</template>
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import type { MessagePart } from '~/composables/useChat';
-
-const props = defineProps<{
-    part: Readonly<MessagePart>;
-}>();
-</script>
-
-<template>
-    <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
-</template>
@@ -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">