veridian/app/components/Sidenav/NavAgent.vue

<script setup lang="ts">
import { assert } from '~~/utils/assert';
import RowVirtualizerFixed from '~/components/RowVirtualizerFixed.vue';

const route = useRoute();
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
const { getAgent } = useAgents();

const triplit = useTriplitClient();

const navRef = ref<HTMLElement | null>(null);
const activeAgent = getAgent(route.params.id as string);
watch(() => route.params.id, () => {
    if (navRef.value) {
        navRef.value.scrollTo({ top: 0, behavior: 'instant' });
    }
}, { immediate: true });

const topics = computed(() => {
    return activeAgent.value?.topics || [];
})

const topicsOpen = ref(true);
let activeAutoRenames = reactive(new Map<string, string>());

const autoRenameTopic = async (topicId: string) => {
    const { setPage } = useSettings();
    const { autoRename, AutoRenameError } = useChat(route.params.id as string);

    const firstMessage = await triplit.fetchOne(triplit.query('messages').Where('topicId', '=', topicId).Order('createdAt', 'ASC').Limit(1));
    if (!firstMessage) return;

    const res = await autoRename(topicId, firstMessage.content);
    if (res.ok) {
        activeAutoRenames.set(topicId, res.data);
        return;
    }

    switch (res.error) {
        case AutoRenameError.NoModelSelected:
        case AutoRenameError.ModelDisabled:
        case AutoRenameError.AutoRenameDisabled: {
            setPage('systemAssistants');
        } break;
        case AutoRenameError.NoModelFound:
        case AutoRenameError.DatabaseOperationFailed:
        case AutoRenameError.FailedToGenerate:
        case AutoRenameError.FailedToDecryptProviderApiKey: {
            console.error('Failed to auto-rename:', res.error);

            await triplit.update('topics', topicId, {
                renaming: false,
            });

            assert('flush' in triplit);
            await triplit.flush();
        } break;
    }
}

const cancelAutoRename = async (topicId: string) => {
    await triplit.update('topics', topicId, {
        renaming: false,
    });

    const renameId = activeAutoRenames.get(topicId);
    if (!renameId) return;

    await $fetch(`/api/topic/auto-rename/cancel/${renameId}`, {
        method: 'POST',
    });

    activeAutoRenames.delete(topicId);
}

const renameTopicId = ref<string | null>(null);
const newTopicName = ref('');

const startRename = (topicId: string, currentName: string) => {
    renameTopicId.value = topicId;
    newTopicName.value = currentName;
    nextTick(() => {
        const input = document.getElementById('topic-rename-input') as HTMLInputElement | null;
        if (input) {
            input.focus();
        }
    })
};

const saveRename = async () => {
    if (renameTopicId.value && newTopicName.value.trim()) {
        await triplit.update('topics', renameTopicId.value, {
            name: newTopicName.value.trim()
        });
    }
    cancelRename();
};

const cancelRename = () => {
    renameTopicId.value = null;
    newTopicName.value = '';
};

const deleteTopic = async (topicId: string) => {
    if (route.params.topicId === topicId) {
        if (route.params.id) {
            await navigateTo(`/agent/${route.params.id}`);
        } else {
            await navigateTo('/');
        }
    }
    await triplit.delete('topics', topicId);

    // TODO: deeply delete all messages, generations, and message_parts in the topic
};

const handleNavClick = (e: MouseEvent) => {
    const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
    if (!trigger) return;

    const topicId = trigger.dataset.topicId || (trigger.closest('[data-topic-id]') as HTMLElement | null)?.dataset.topicId;
    if (!topicId) return;

    const action = trigger.dataset.action;
    switch (action) {
        case 'navigate':
            if (e.metaKey || e.ctrlKey || e.shiftKey) return;
            e.preventDefault();
            return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);

        case 'toggle-dropdown':
            e.preventDefault();
            e.stopPropagation();
            if (dropdownState.open) {
                closeDropdown();
                return;
            }

            openDropdown(e, () => {
                const topic = topics.value.find(t => t.id === topicId);
                const isRenaming = activeAutoRenames.has(topicId) && topic?.renaming;

                return [
                    isRenaming
                        ? { label: 'Cancel Auto Rename', onClick: () => cancelAutoRename(topicId) }
                        : { label: 'Auto Rename', onClick: () => autoRenameTopic(topicId) },
                    { label: 'Rename', disabled: isRenaming ?? false, onClick: () => startRename(topicId, topic?.name || '') },
                    { label: 'Delete', danger: true, onClick: () => deleteTopic(topicId) }
                ];
            }, { minWidth: '120px', placement: 'right' });
            break;
    }
}

onMounted(() => {
    // simply preload the topic page
    preloadRouteComponents(`/agent/${route.params.id}/topic/42`);
})
</script>

<template>
    <nav ref="navRef"
        class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">

        <!-- Agent Info Link -->
        <div class="mt-2 flex flex-col">
            <SidenavItem :to="`/agent/${route.params.id}/profile`" name="Agent Info" icon="mynaui:info-square"
                :active="route.path.endsWith('/profile')" />

            <!-- Topics Section -->
            <button @click="topicsOpen = !topicsOpen"
                class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
                <span class="text-sm font-medium">Topics</span>
                <Icon name="mynaui:chevron-down" :class="['w-4 h-4', topicsOpen ? '' : '-rotate-90']" />
            </button>

            <Collapsible :is-open="topicsOpen">
                <div @click="handleNavClick" class="mt-1 flex flex-col transform-origin-center-top">
                    <RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
                        :item-size="40" :overscan="20">
                        <template v-slot="{ item: topic }">
                            <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
                                :href="`/agent/${route.params.id}/topic/${topic.id}`" :aria-label="topic.name"
                                class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]"
                                :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
                                <input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
                                    v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
                                    @blur="saveRename"
                                    class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
                                <div v-else-if="topic.renaming" class="flex w-full">
                                    <Icon name="svg-spinners:3-dots-fade" class="text-6" />
                                </div>
                                <span v-else
                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                    {{ topic.name }}
                                </span>

                                <div data-action="toggle-dropdown"
                                    class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                                    <span class="h-4.5 w-4.5 i-tabler:dots"></span>
                                </div>
                            </a>
                        </template>
                    </RowVirtualizerFixed>
                </div>
            </Collapsible>
        </div>
    </nav>
</template>

<!-- text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] -->