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">
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Message } from '~/composables/useChat';
+import { getActiveMessage, getCurrentChildIndex, getMessageCount, getNextActiveChildId } from '~~/utils/message';

 const { openDialog } = useDialog();

@@ -35,7 +36,9 @@ watch(() => message.activeChildId, async (newValue) => {
 });

 watch(() => message.children.length, (newCount, oldCount) => {
-    if (newCount === oldCount) return;
+    if (newCount === oldCount) {
+        return;
+    }

    if (newCount === 0) {
        emit('patch', { activeChildId: null });
@@ -56,19 +59,17 @@ watch(() => message.children.length, (newCount, oldCount) => {
    }
 });

-const activeMessage = computed(() => {
-    if (message.activeChildId && message.children.length > 0) {
-        const child = message.children.find(c => c?.id === message.activeChildId);
-        if (child) return child;
+watch(() => message.deleted, (isDeleted) => {
+    if (isDeleted && message.children.length > 0) {
+        const activeChild = message.children.find(c => c?.id === message.activeChildId);
+        if (!activeChild) {
+            emit('patch', { activeChildId: message.children[0]?.id ?? null });
+        }
    }
-
-    if (message.deleted === true && message.children.length > 0) {
-        return message.children[0];
-    }
-
-    return message;
 });

+const activeMessage = computed(() => getActiveMessage(message));
+
 const copied = ref(false);
 const copyMessage = async () => {
    if (activeMessage.value!.role === 'user') {
@@ -135,91 +136,118 @@ const deleteMessage = () => {
    emit('delete');
 };

-const messageCount = computed(() => {
-    if (message.deleted === true) {
-        return message.children.length;
-    }
+const messageCount = computed(() => getMessageCount(message));

-    return message.children.length + 1;
-});
-
-const currentChildIndex = computed(() => {
-    if (!message.activeChildId) return 0;
-    const idx = message.children.findIndex(c => c?.id === message.activeChildId);
-    return idx >= 0 ? idx + 1 : 0;
-});
+const currentChildIndex = computed(() => getCurrentChildIndex(message));

 const navigateChild = (direction: -1 | 1) => {
-    const allItems = message.deleted === true
-        ? message.children
-        : [null, ...message.children];
+    const nextActiveChildId = getNextActiveChildId(message, direction);
+    emit('patch', { activeChildId: nextActiveChildId });
+};

-    const currentIdx = allItems.findIndex(item =>
-        !item ? !message.activeChildId : item.id === message.activeChildId
-    );
+const { show: showTooltip, hide: hideTooltip } = useTooltip();

-    const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));
-    const newItem = allItems[newIdx];
+let hasCursor: boolean | null = null;
+const checkHasCursor = () => {
+    if (hasCursor === null && typeof window !== 'undefined') {
+        hasCursor = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+    }
+    return hasCursor ?? false;
+};

-    emit('patch', { activeChildId: newItem?.id ?? null });
+const handleTooltipHover = (e: MouseEvent) => {
+    if (!checkHasCursor()) {
+        return;
+    }
+    const target = (e.target as HTMLElement).closest('[data-hotkey], [data-tooltip]') as HTMLElement | null;
+    if (!target) {
+        return;
+    }
+    const hotkey = target.dataset.hotkey ? target.dataset.hotkey.split(',') : undefined;
+    const text = target.dataset.tooltip || undefined;
+    showTooltip(target, hotkey, text);
+};
+
+const handleTooltipLeave = () => {
+    hideTooltip();
+};
+
+const handleAction = (e: MouseEvent) => {
+    const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
+    if (!trigger) {
+        return;
+    }
+    switch (trigger.dataset.action) {
+        case 'prev-child':
+            navigateChild(-1);
+            break;
+        case 'next-child':
+            navigateChild(1);
+            break;
+        case 'regenerate':
+            regenerateMessage();
+            break;
+        case 'edit':
+            handleEdit();
+            break;
+        case 'copy':
+            copyMessage();
+            break;
+        case 'fork':
+            forkMessage();
+            break;
+        case 'delete':
+            deleteMessage();
+            break;
+    }
 };
 </script>

 <template>
    <div v-if="activeMessage" class="max-w-full mb-4 group flex flex-col">
-        <div :class="[message.role === 'user' ? 'pl-9 flex justify-end' : '']">
-            <MessageUser v-if="message.role === 'user'" :message="activeMessage!" />
-            <MessageAgent v-else :message="activeMessage" />
-        </div>
-        <div class="flex justify-between items-center">
-            <div>
-                <div v-if="messageCount > 1" class="flex gap-1">
-                    <Tooltip :inert="currentChildIndex === 0" :hotkey="['alt', '[']">
-                        <button @click="navigateChild(-1)"
-                            class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                            <span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)]"
-                                :class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
-                        </button>
-                    </Tooltip>
-                    <span class="text-xs text-[var(--text-secondary)]">
-                        {{ currentChildIndex + 1 }} / {{ messageCount }}
-                    </span>
-                    <Tooltip :inert="currentChildIndex + 1 === messageCount" :hotkey="['alt', ']']">
-                        <button @click="navigateChild(1)"
-                            class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                            <span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)]"
-                                :class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
-                        </button>
-                    </Tooltip>
-                </div>
+        <MessageUser v-if="message.role === 'user'" class="pl-9 self-end" :message="activeMessage!"></MessageUser>
+        <MessageAgent v-else :message="activeMessage"></MessageAgent>
+        <div class="flex justify-between items-center" @click="handleAction">
+            <div v-if="messageCount > 1" class="flex gap-1"
+                @mouseover="handleTooltipHover" @mouseout="handleTooltipLeave">
+                <button data-action="prev-child" :data-hotkey="currentChildIndex > 0 ? 'alt,[' : undefined"
+                    class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                    <span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
+                        :class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
+                </button>
+                <span class="text-xs text-[var(--text-secondary)]">
+                    {{ currentChildIndex + 1 }} / {{ messageCount }}
+                </span>
+                <button data-action="next-child" :data-hotkey="currentChildIndex + 1 < messageCount ? 'alt,]' : undefined"
+                    class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                    <span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
+                        :class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
+                </button>
            </div>

            <div v-show="activeMessage.generation?.status !== 'pending'"
-                class="self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                <Tooltip :hotkey="['ctrl', 'shift', 'enter']">
-                    <button @click="regenerateMessage"
-                        class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
-                        <span class="i-mynaui-refresh text-4.5"></span>
-                    </button>
-                </Tooltip>
-                <button v-if="message.role === 'user'" @click="handleEdit"
+                @mouseover="handleTooltipHover" @mouseout="handleTooltipLeave"
+                class="ml-auto self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                <button data-action="regenerate" data-hotkey="ctrl,shift,enter"
                    class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
-                    <span class="i-mynaui-pencil text-4.5"></span>
+                    <span class="i-mynaui-refresh text-4.5 pointer-events-none"></span>
                </button>
-                <button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
+                <button v-if="message.role === 'user'" data-action="edit"
                    class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
-                    <span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'"></span>
+                    <span class="i-mynaui-pencil text-4.5 pointer-events-none"></span>
                </button>
-                <button @click="forkMessage"
+                <button data-action="copy" :class="{ 'text-emerald-500': copied }"
                    class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
-                    <span class="i-mynaui-git-branch text-4.5"></span>
+                    <span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'" class="pointer-events-none"></span>
+                </button>
+                <button data-action="fork"
+                    class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
+                    <span class="i-mynaui-git-branch text-4.5 pointer-events-none"></span>
+                </button>
+                <button data-action="delete" data-hotkey="ctrl,shift,backspace"
+                    class="flex justify-center items-center w-7 h-6 text-red-500 @hover:bg-[var(--color-hover)]">
+                    <span class="i-mynaui-trash text-5 pointer-events-none"></span>
                </button>
-                <Tooltip :hotkey="['ctrl', 'shift', 'backspace']">
-                    <button @click="deleteMessage"
-                        class="flex justify-center items-center w-7 h-6 text-red-500 @hover:bg-[var(--color-hover)]">
-                        <span class="i-mynaui-trash text-5"></span>
-                    </button>
-                </Tooltip>
            </div>
        </div>
    </div>