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.
45 lines
2.4 KiB
Vue
45 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { providerIcons } from '~/utils/model-mapping';
|
|
|
|
const { pageParams } = useSettings();
|
|
const { providers } = await useModels();
|
|
|
|
defineEmits(['navigate']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-1 overflow-auto">
|
|
<button @click="$emit('navigate', 'general')"
|
|
class="flex items-center gap-2 p-2 rounded-lg text-sm hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<Icon name="mynaui:chevron-left" class="text-4" /> Back to General
|
|
</button>
|
|
|
|
<button @click="$emit('navigate', 'providers')"
|
|
class="flex items-center gap-2 p-2 rounded-lg text-sm hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<Icon name="mynaui:envelope-open" class="text-4" /> All
|
|
</button>
|
|
|
|
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div>
|
|
|
|
<button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
|
|
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']">
|
|
<div class="flex items-center gap-2">
|
|
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
|
class="w-4 h-4 text-[var(--text-primary)]" />
|
|
<span>{{ p.name }}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Disabled Providers</div>
|
|
|
|
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
|
|
@click="$emit('navigate', 'providers', p.id)"
|
|
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']">
|
|
<div class="flex items-center gap-2">
|
|
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
|
class="w-4 h-4 text-[var(--text-primary)]" />
|
|
<span>{{ p.name }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template> |