♻️ 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,15 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const { agents, getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
|
||||
const { agents, getAgent } = useAgents();
|
||||
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
||||
|
||||
const activeAgent = computed(() => getAgent(route.params.id as string));
|
||||
const activeAgent = getAgent(route.params.id as string);
|
||||
|
||||
const { isHovered, sidebarWidth } = useSidenavContext();
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribeAgents?.();
|
||||
});
|
||||
const { isHovered } = useSidenavContext();
|
||||
|
||||
const toggleDropdown = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
@@ -66,36 +62,5 @@ const toggleDropdown = (e: MouseEvent) => {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- <Dropdown class="overflow-hidden" v-model="agentDropdownOpen" placement="center" width="calc(80% - 1rem)">
|
||||
<template #trigger="{ toggle }">
|
||||
<button
|
||||
class="flex max-w-full transition duration-200 gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
|
||||
@click="toggle">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
|
||||
class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
{{ activeAgent?.name }}
|
||||
</span>
|
||||
<div class="w-4 h-4 text-[var(--text-secondary)]">
|
||||
<Icon
|
||||
class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
|
||||
name="mynaui:chevron-up-down" />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-1.5 max-h-[calc(2.25rem*4+0.375rem*3)] overflow-y-auto">
|
||||
<SidenavItem draggable="false" v-for="agent in agents" :to="`/agent/${agent.id}`" :name="agent.name"
|
||||
class="whitespace-nowrap" icon="mynaui:check-hexagon" :key="agent.id"
|
||||
:active="activeAgent?.id === agent.id" />
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown> -->
|
||||
</header>
|
||||
</template>
|
||||
@@ -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)] -->
|
||||
@@ -1,8 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
const { agents, unsubscribe, createAgent } = await useAgents();
|
||||
const { agents, createAgent } = useAgents();
|
||||
const agentsOpen = ref(true);
|
||||
const creatingAgent = ref(false);
|
||||
|
||||
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
||||
|
||||
const navRef = ref<HTMLElement | null>(null);
|
||||
const toggleAgentsList = () => {
|
||||
agentsOpen.value = !agentsOpen.value;
|
||||
};
|
||||
@@ -11,17 +14,62 @@ const newAgent = async () => {
|
||||
creatingAgent.value = true;
|
||||
try {
|
||||
const agent = await createAgent();
|
||||
if (agent) return navigateTo(`/agent/${agent.id}`);
|
||||
return navigateTo(`/agent/${agent.id}`);
|
||||
} finally {
|
||||
creatingAgent.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => unsubscribe?.());
|
||||
const handleNavClick = (e: MouseEvent) => {
|
||||
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
||||
if (!trigger) return;
|
||||
|
||||
const agentId = trigger.dataset.agentId || (trigger.closest('[data-agent-id]') as HTMLElement | null)?.dataset.agentId;
|
||||
if (!agentId) return;
|
||||
|
||||
const action = trigger.dataset.action;
|
||||
switch (action) {
|
||||
case 'navigate':
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
||||
e.preventDefault();
|
||||
return navigateTo(`/agent/${agentId}`);
|
||||
|
||||
case 'toggle-dropdown':
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (dropdownState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
// openDropdown(e, () => {
|
||||
// const agent = agents.value.find(a => a.id === agentId);
|
||||
// if (agent) {
|
||||
// const isRenaming = activeAutoRenames.has(agentId) && agent?.renaming;
|
||||
|
||||
// return [
|
||||
// isRenaming
|
||||
// ? { label: 'Cancel Auto Rename', onClick: () => cancelAutoRename(agentId) }
|
||||
// : { label: 'Auto Rename', onClick: () => autoRenameAgent(agentId) },
|
||||
// { label: 'Rename', disabled: isRenaming ?? false, onClick: () => startRename(agentId, agent?.name || '') },
|
||||
// { label: 'Delete', danger: true, onClick: () => deleteAgent(agentId) }
|
||||
// ];
|
||||
// }
|
||||
|
||||
// return [];
|
||||
// }, { minWidth: '120px', placement: 'right' });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// simply preload the topic page
|
||||
preloadRouteComponents(`/agent/42`);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
|
||||
<SidenavItem name="Search" icon="mynaui:search" />
|
||||
<SidenavItem to="/" name="Home" icon="mynaui:home" />
|
||||
|
||||
@@ -46,8 +94,32 @@ onUnmounted(() => unsubscribe?.());
|
||||
<span>New Agent</span>
|
||||
</button>
|
||||
|
||||
<SidenavItem v-for="agent in agents" :key="agent.id" :to="`/agent/${agent.id}`" :name="agent.name"
|
||||
icon="mynaui:check-hexagon" />
|
||||
<div @click="handleNavClick" class="flex flex-col">
|
||||
<RowVirtualizerFixed :scroll-element="navRef" key-field="id" :items="agents" :prerender="50"
|
||||
:item-size="40" :overscan="20">
|
||||
<template v-slot="{ item: agent }">
|
||||
<a data-action="navigate" :data-agent-id="agent.id" :href="`/agent/${agent.id}`"
|
||||
:aria-label="agent.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)]">
|
||||
<!-- <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 class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ agent.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>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</nav>
|
||||
|
||||
@@ -109,7 +109,7 @@ const navKind = computed(() => {
|
||||
<div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
|
||||
<div class="flex flex-col h-full max-h-full overflow-y-hidden">
|
||||
<!-- Header -->
|
||||
<div class="relative flex flex-row gap-2 justify-between items-center mb-1.5">
|
||||
<div class="relative flex flex-row gap-2 justify-between items-center mb-1.5 h-8">
|
||||
|
||||
<SidenavHeader v-if="navKind === 'home'" />
|
||||
<SidenavHeaderAgent v-else-if="navKind === 'agent'" />
|
||||
@@ -135,11 +135,8 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
|
||||
<!-- Main Menu -->
|
||||
<div
|
||||
class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
<SidenavNavHome v-if="navKind === 'home'" />
|
||||
<SidenavNavAgent v-else-if="navKind === 'agent'" />
|
||||
</div>
|
||||
<SidenavNavHome v-if="navKind === 'home'" />
|
||||
<SidenavNavAgent v-else-if="navKind === 'agent'" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between pt-2">
|
||||
|
||||
Reference in New Issue
Block a user