♻️ refactor: optimize state management, switch to @tanstack/vue-virtual, and improve performance
- Centralize `useAgents` and `useModels` state within the Nuxt app context to prevent data leaks and improve initialization. - Migrate virtualization from `vue-virtual-scroller` to `@tanstack/vue-virtual` with new `RowVirtualizerFixed` and `RowVirtualizerDynamic` components. - Upgrade Nuxt to v4.3.1 and remove `@vue-macros/nuxt`. - Replace `big.js` with an optimized custom `lshDecimal` string manipulation logic for pricing calculations in the provider API. - Implement automatic focus redirection in `ChatInput` to capture standard keyboard input. - Refactor Sidenav and Settings components to utilize virtualization for long lists (topics, agents, models). - Enhance theme colors and mobile experience. More work to come on both of these.
This commit is contained in:
@@ -1,18 +1,24 @@
|
||||
<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, unsubscribe: unsubscribeAgents } = await useAgents();
|
||||
const { getAgent } = useAgents();
|
||||
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const activeAgent = computed(() => getAgent(route.params.id as string));
|
||||
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(() => {
|
||||
if (activeAgent.value === undefined) return [];
|
||||
return activeAgent.value.topics;
|
||||
});
|
||||
return activeAgent.value?.topics || [];
|
||||
})
|
||||
|
||||
const topicsOpen = ref(true);
|
||||
let activeAutoRenames = reactive(new Map<string, string>());
|
||||
@@ -116,54 +122,33 @@ const handleNavClick = (e: MouseEvent) => {
|
||||
if (!topicId) return;
|
||||
|
||||
const action = trigger.dataset.action;
|
||||
if (action === 'navigate') {
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
||||
switch (action) {
|
||||
case 'navigate':
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
||||
e.preventDefault();
|
||||
return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);
|
||||
|
||||
e.preventDefault();
|
||||
return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);
|
||||
}
|
||||
|
||||
if (action === 'toggle-dropdown') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (dropdownState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsFactory = () => {
|
||||
const items = [];
|
||||
const isRenaming = activeAutoRenames.has(topicId) && topics.value?.find(t => t.id === topicId)?.renaming;
|
||||
|
||||
if (isRenaming) {
|
||||
items.push({
|
||||
label: 'Cancel Auto Rename',
|
||||
onClick: () => cancelAutoRename(topicId)
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
label: 'Auto Rename',
|
||||
onClick: () => autoRenameTopic(topicId)
|
||||
});
|
||||
case 'toggle-dropdown':
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (dropdownState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Rename',
|
||||
disabled: isRenaming ?? false,
|
||||
onClick: () => startRename(topicId, topics.value?.find(t => t.id === topicId)?.name || '')
|
||||
});
|
||||
openDropdown(e, () => {
|
||||
const topic = topics.value.find(t => t.id === topicId);
|
||||
const isRenaming = activeAutoRenames.has(topicId) && topic?.renaming;
|
||||
|
||||
items.push({
|
||||
label: 'Delete',
|
||||
danger: true,
|
||||
onClick: () => deleteTopic(topicId)
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
openDropdown(e, itemsFactory, { minWidth: '120px', placement: 'right' });
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,14 +156,11 @@ onMounted(() => {
|
||||
// simply preload the topic page
|
||||
preloadRouteComponents(`/agent/${route.params.id}/topic/42`);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribeAgents?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<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">
|
||||
@@ -193,18 +175,14 @@ onUnmounted(() => {
|
||||
</button>
|
||||
|
||||
<Collapsible :is-open="topicsOpen">
|
||||
<div @click="handleNavClick"
|
||||
class="mt-1 gap-1 flex flex-col transform-origin-center-top [content-visibility:auto] [contain-intrinsic-size:0_36px]">
|
||||
<a v-for="topic in topics" :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
||||
:href="`/agent/${route.params.id}/topic/${topic.id}`" :aria-label="topic.name" :class="[
|
||||
'group relative decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
||||
'px-2',
|
||||
topic.id === route.params.topicId
|
||||
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
||||
: 'text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<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"
|
||||
@@ -218,18 +196,16 @@ onUnmounted(() => {
|
||||
</span>
|
||||
|
||||
<div data-action="toggle-dropdown"
|
||||
class="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-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<svg class="pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="18"
|
||||
height="18" viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
|
||||
</svg>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</template>
|
||||
</RowVirtualizerFixed>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<!-- text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] -->
|
||||
Reference in New Issue
Block a user