Performance enhancements galore! New themining system
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
This commit is contained in:
@@ -68,15 +68,18 @@ const onResizeEnd = () => {
|
||||
|
||||
let resizeAnimationFrame: number | null = null;
|
||||
|
||||
const trackInteractionMouse = () => trackInteraction('mouse');
|
||||
const trackInteractionKeyboard = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', onResizeMove);
|
||||
document.addEventListener('mouseup', onResizeEnd);
|
||||
|
||||
// NEW: Track global interactions
|
||||
document.addEventListener('mousedown', () => trackInteraction('mouse'));
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
});
|
||||
document.addEventListener('mousedown', trackInteractionMouse);
|
||||
document.addEventListener('keydown', trackInteractionKeyboard);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -84,10 +87,8 @@ onUnmounted(() => {
|
||||
document.removeEventListener('mouseup', onResizeEnd);
|
||||
|
||||
// NEW: Cleanup listeners
|
||||
document.removeEventListener('mousedown', () => trackInteraction('mouse'));
|
||||
document.removeEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
});
|
||||
document.removeEventListener('mousedown', trackInteractionMouse);
|
||||
document.removeEventListener('keydown', trackInteractionKeyboard);
|
||||
});
|
||||
|
||||
const navKind = computed(() => {
|
||||
@@ -100,9 +101,9 @@ const navKind = computed(() => {
|
||||
<template>
|
||||
<div class="relative">
|
||||
<aside ref="sidenavRef" :class="[
|
||||
'sidenav',
|
||||
open ? 'sidenav--open' : 'sidenav--closed',
|
||||
isResizing ? 'sidenav--resizing' : ''
|
||||
'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
|
||||
open ? 'w-full mr-2' : 'w-0 mr-0',
|
||||
isResizing ? 'transition-none' : ''
|
||||
]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
|
||||
@mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
|
||||
<div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
|
||||
@@ -113,11 +114,11 @@ const navKind = computed(() => {
|
||||
<SidenavHeader v-if="navKind === 'home'" />
|
||||
<SidenavHeaderAgent v-else-if="navKind === 'agent'" />
|
||||
|
||||
<div class="flex items-center justify-end text-[var(--color-muted)] gap-0.5">
|
||||
<div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
|
||||
<div :style="isHovering ? 'width: 32px;' : 'width: 0px;'"
|
||||
:class="['flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right']">
|
||||
<button aria-label="close sidebar" @click="closeSidebar" :class="[
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] bg-transparent transition-inherit',
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
|
||||
]">
|
||||
<Icon name="mynaui:panel-left-close"
|
||||
:class="['transition-inherit transform-origin-right-center', isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']" />
|
||||
@@ -125,7 +126,7 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
<div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
|
||||
<NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] bg-transparent text-inherit',
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
|
||||
]">
|
||||
<Icon name="mynaui:book-plus" />
|
||||
</NuxtLink>
|
||||
@@ -134,7 +135,8 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
|
||||
<!-- Main Menu -->
|
||||
<div class="max-h-full h-full overflow-auto" style="scrollbar-width: thin;">
|
||||
<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>
|
||||
@@ -143,12 +145,11 @@ const navKind = computed(() => {
|
||||
<div class="flex justify-between pt-2">
|
||||
<div class="flex">
|
||||
<button @click="toggleSettings()"
|
||||
class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg transition-colors text-[var(--color-muted)] active:text-[var(--color-text)]">
|
||||
<Icon name="mynaui:cog-four" class="text-4" />
|
||||
class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
|
||||
<Icon name="mynaui:cog-four" class="text-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Theme Switcher -->
|
||||
<div class="flex justify-end gap-1">
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
@@ -161,31 +162,3 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
max-width: fit-content;
|
||||
background: var(--color-base);
|
||||
overflow: hidden;
|
||||
will-change: width;
|
||||
color: var(--color-muted);
|
||||
user-select: none;
|
||||
transition: width 250ms cubic-bezier(0, 0.55, 0.45, 1),
|
||||
margin 250ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
|
||||
.sidenav--open {
|
||||
width: 100%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sidenav--closed {
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidenav--resizing {
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user