zoeissleeping
6ee4087a29
- 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.
66 lines
2.9 KiB
Vue
66 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const { agents, getAgent } = useAgents();
|
|
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
|
|
|
const activeAgent = getAgent(route.params.id as string);
|
|
|
|
const { isHovered } = useSidenavContext();
|
|
|
|
const toggleDropdown = (e: MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
if (dropdownState.open) {
|
|
closeDropdown();
|
|
return;
|
|
}
|
|
|
|
const itemsFactory = () => {
|
|
const items = [];
|
|
for (const agent of agents.value || []) {
|
|
items.push({
|
|
label: agent.name,
|
|
icon: 'mynaui:check-hexagon',
|
|
active: activeAgent.value?.id === agent.id,
|
|
onClick: () => navigateTo(`/agent/${agent.id}`)
|
|
});
|
|
}
|
|
return items;
|
|
};
|
|
|
|
openDropdown(e, itemsFactory, { verticality: 'descending', placement: 'center', maxWidth: '200px' });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex items-center rounded-lg overflow-hidden">
|
|
<div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
|
|
:class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
|
|
<NuxtLink to="/"
|
|
class="flex hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
|
|
<Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<button
|
|
class="max-w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
|
|
@click="toggleDropdown">
|
|
<div class="pointer-events-none flex items-center gap-1.5 max-w-full">
|
|
<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>
|
|
</div>
|
|
</button>
|
|
</header>
|
|
</template> |