feat: replace settings with a full page
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
const { open: sidebarOpen, openSidebar } = useSidebar();
|
||||
const { providers } = await useModels();
|
||||
const route = useRoute();
|
||||
|
||||
const TITLES: Record<string, string> = {
|
||||
profile: 'Profile',
|
||||
general: 'General',
|
||||
appearance: 'Appearance',
|
||||
providers: 'AI Providers',
|
||||
assistants: 'System Assistants',
|
||||
};
|
||||
|
||||
const title = computed(() => {
|
||||
const [section, id] = route.path.split('/').slice(2);
|
||||
|
||||
if (section === 'providers' && id) {
|
||||
const provider = providers.value.find(p => p.id === id);
|
||||
return provider ? provider.name : 'Unknown Provider';
|
||||
}
|
||||
|
||||
return TITLES[section ?? ''] ?? 'Settings';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex flex-col">
|
||||
<div class="h-14 flex items-center justify-between px-4 shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<button v-if="!sidebarOpen" @click="openSidebar"
|
||||
class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent @hover:bg-[var(--color-hover)] transition-colors">
|
||||
<span class="i-mynaui-panel-left-open text-5"></span>
|
||||
</button>
|
||||
<h1 class="text-lg font-semibold text-[var(--text-primary)] case-capital">{{ title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 flex flex-col px-4">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
const { colorScheme, settings, updateSettings } = await useUserSettings();
|
||||
|
||||
const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
|
||||
const neutrals = ['zinc', 'slate', 'obsidian'];
|
||||
|
||||
const updateAccent = (accent: string) => {
|
||||
updateSettings({ appearance: { accent } });
|
||||
};
|
||||
|
||||
const updateNeutral = (neutral: string) => {
|
||||
updateSettings({ appearance: { neutral } });
|
||||
};
|
||||
|
||||
const updateHinting = (e: Event) => {
|
||||
const hinting = parseInt((e.target as HTMLInputElement).value);
|
||||
updateSettings({ appearance: { hinting } });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-6 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<div class="flex flex-row items-center justify-between gap-2">
|
||||
<h4 class="font-medium">Theme</h4>
|
||||
<div class="flex gap-2">
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'system' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'system' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-tabler-device-desktop text-4"></span>
|
||||
<span>System</span>
|
||||
</button>
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'dark' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'dark' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-mynaui-moon text-4"></span>
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'light' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'light' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-mynaui-sun text-4"></span>
|
||||
<span>Light</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="text-sm font-medium">Accent Color</h4>
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<button v-for="accent in accents" :key="accent" @click="updateAccent(accent)"
|
||||
class="h-8 rounded border-2 @hover:scale-105 active:scale-95 transition-all duration-200 ease-[cubic-bezier(0.33,_1,_0.68,_1)]"
|
||||
:class="[
|
||||
settings.appearance.accent === accent ? 'dark:border-white/70 border-black/70' : 'border-transparent'
|
||||
]" :style="`background-color: var(--accent-${accent})`" :title="accent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="text-sm font-medium">Neutral Color</h4>
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<button v-for="neutral in neutrals" :key="neutral" @click="updateNeutral(neutral)"
|
||||
class="h-8 rounded border-2 @hover:scale-105 active:scale-95 transition-all duration-200 ease-[cubic-bezier(0.33,_1,_0.68,_1)]"
|
||||
:class="[
|
||||
settings.appearance.neutral === neutral ? 'border-[var(--color-accent)]' : 'border-transparent @hover:border-zinc-500'
|
||||
]" :style="`background-color: var(--palette-${neutral}-200)`" :title="neutral" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="text-sm font-medium">Accent Hinting</h4>
|
||||
<span class="text-xs text-zinc-500">{{ settings.appearance.hinting }}%</span>
|
||||
</div>
|
||||
<input type="range" min="0" max="100" step="1" :value="settings.appearance.hinting" @input="updateHinting"
|
||||
class="accent-[var(--color-accent)]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import type { ModelWithProvider } from '~/composables/useModels';
|
||||
|
||||
const { providers, allModels } = await useModels();
|
||||
const { settings, updateSettings } = await useUserSettings();
|
||||
|
||||
const toggle = async () => {
|
||||
const current = settings.value.systemAssistants.rename;
|
||||
await updateSettings({
|
||||
systemAssistants: {
|
||||
rename: {
|
||||
...current,
|
||||
enabled: !current.enabled
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateModel = async (model: ModelWithProvider | undefined | null) => {
|
||||
const current = settings.value.systemAssistants.rename;
|
||||
await updateSettings({
|
||||
systemAssistants: {
|
||||
rename: {
|
||||
...current,
|
||||
modelId: model?.id ?? null
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getModel = (id: string | null | undefined) => {
|
||||
if (!id) return null;
|
||||
|
||||
return allModels.value.find(m => m.id === id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-4 py-4 flex-grow overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<div class="flex flex-col">
|
||||
<label for="slider-rename" class="flex justify-between gap-4 items-center">
|
||||
<h4 class="case-capital">Rename</h4>
|
||||
<Slider id="slider-rename" :checked="settings.systemAssistants.rename?.enabled ?? false"
|
||||
@click="toggle" />
|
||||
</label>
|
||||
<div class="flex-1 justify-between gap-4 items-center">
|
||||
<ModelSelector :providers="providers" :model-value="getModel(settings.systemAssistants.rename?.modelId)"
|
||||
@update:model-value="updateModel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="py-4 text-sm text-[var(--text-secondary)]">
|
||||
Nothing to configure here yet.
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
redirect: '/settings/profile',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
@@ -0,0 +1,240 @@
|
||||
<script setup lang="ts">
|
||||
import { Err, Ok, type Result } from '~~/types/result';
|
||||
|
||||
const AVATAR_SIZE = 256;
|
||||
const MAX_SOURCE_SIZE = 10 * 1024 * 1024;
|
||||
const ACCEPTED_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
|
||||
|
||||
const { user, updateProfile } = useAuth();
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const avatarBusy = ref(false);
|
||||
const avatarError = ref('');
|
||||
|
||||
const name = ref(user.value?.name ?? '');
|
||||
const nameSaving = ref(false);
|
||||
const nameError = ref('');
|
||||
|
||||
watch(() => user.value?.name, (value) => {
|
||||
if (!nameSaving.value) name.value = value ?? '';
|
||||
});
|
||||
|
||||
const trimmedName = computed(() => name.value.trim());
|
||||
const nameChanged = computed(() => trimmedName.value !== '' && trimmedName.value !== user.value?.name);
|
||||
|
||||
// Center-crops the image to a square and scales it down, so we only ever
|
||||
// store a small file no matter what the user picked.
|
||||
const cropToSquare = async (file: File): Promise<Result<Blob, string>> => {
|
||||
let bitmap: ImageBitmap;
|
||||
try {
|
||||
bitmap = await createImageBitmap(file);
|
||||
} catch {
|
||||
return Err('That file could not be read as an image.');
|
||||
}
|
||||
|
||||
const side = Math.min(bitmap.width, bitmap.height);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = AVATAR_SIZE;
|
||||
canvas.height = AVATAR_SIZE;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx === null) {
|
||||
bitmap.close();
|
||||
return Err('Your browser could not process the image.');
|
||||
}
|
||||
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
ctx.drawImage(
|
||||
bitmap,
|
||||
(bitmap.width - side) / 2, (bitmap.height - side) / 2, side, side,
|
||||
0, 0, AVATAR_SIZE, AVATAR_SIZE,
|
||||
);
|
||||
bitmap.close();
|
||||
|
||||
// browsers that can't encode webp hand back a png instead
|
||||
const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, 'image/webp', 0.9));
|
||||
if (blob === null) {
|
||||
return Err('Your browser could not process the image.');
|
||||
}
|
||||
|
||||
return Ok(blob);
|
||||
};
|
||||
|
||||
const uploadAvatar = async (blob: Blob): Promise<Result<string, string>> => {
|
||||
const extension = blob.type === 'image/webp' ? 'webp' : 'png';
|
||||
|
||||
try {
|
||||
const { url, assetUrl } = await $fetch<{ url: string; assetUrl: string }>('/api/upload/presigned', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
file: {
|
||||
name: `avatar.${extension}`,
|
||||
mimeType: blob.type,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': blob.type },
|
||||
body: blob,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return Err('Upload failed. Check that file storage is configured for this instance.');
|
||||
}
|
||||
|
||||
return Ok(assetUrl);
|
||||
} catch (error) {
|
||||
console.error('Avatar upload failed:', error);
|
||||
return Err('Upload failed. Check that file storage is configured for this instance.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
// reset so picking the same file again still fires a change event
|
||||
input.value = '';
|
||||
|
||||
if (!file) return;
|
||||
|
||||
avatarError.value = '';
|
||||
|
||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
||||
avatarError.value = 'Pick a PNG, JPG or WebP image.';
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > MAX_SOURCE_SIZE) {
|
||||
avatarError.value = 'That image is over 10 MB. Pick a smaller one.';
|
||||
return;
|
||||
}
|
||||
|
||||
avatarBusy.value = true;
|
||||
|
||||
const cropped = await cropToSquare(file);
|
||||
if (cropped.ok === false) {
|
||||
avatarError.value = cropped.error;
|
||||
avatarBusy.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const uploaded = await uploadAvatar(cropped.data);
|
||||
if (uploaded.ok === false) {
|
||||
avatarError.value = uploaded.error;
|
||||
avatarBusy.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const updated = await updateProfile({ image: uploaded.data });
|
||||
if (updated.ok === false) {
|
||||
avatarError.value = 'The image uploaded, but your profile could not be updated. Try again.';
|
||||
}
|
||||
|
||||
avatarBusy.value = false;
|
||||
};
|
||||
|
||||
const removeAvatar = async () => {
|
||||
avatarError.value = '';
|
||||
avatarBusy.value = true;
|
||||
|
||||
const updated = await updateProfile({ image: null });
|
||||
if (updated.ok === false) {
|
||||
avatarError.value = 'Your profile picture could not be removed. Try again.';
|
||||
}
|
||||
|
||||
avatarBusy.value = false;
|
||||
};
|
||||
|
||||
const saveName = async () => {
|
||||
if (!nameChanged.value || nameSaving.value) return;
|
||||
|
||||
nameError.value = '';
|
||||
nameSaving.value = true;
|
||||
|
||||
const updated = await updateProfile({ name: trimmedName.value });
|
||||
if (updated.ok === false) {
|
||||
nameError.value = 'Your name could not be saved. Try again.';
|
||||
} else {
|
||||
name.value = trimmedName.value;
|
||||
}
|
||||
|
||||
nameSaving.value = false;
|
||||
};
|
||||
|
||||
const memberSince = computed(() => {
|
||||
if (!user.value?.createdAt) return '';
|
||||
|
||||
// fixed locale and time zone so the server and client render the same text
|
||||
return new Date(user.value.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
timeZone: 'UTC',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-5 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<div class="flex flex-col gap-5 w-full max-w-3xl">
|
||||
<section class="flex flex-wrap items-center gap-5 pb-5 border-b border-[var(--color-border)]">
|
||||
<UserAvatar :user="user" class="w-20 h-20 rounded-xl text-3xl" />
|
||||
|
||||
<div class="flex flex-col gap-2 flex-1 min-w-60">
|
||||
<h2 class="font-medium">Profile picture</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button type="button" :disabled="avatarBusy" @click="fileInput?.click()"
|
||||
class="flex items-center gap-2 h-8 px-3 text-sm rounded-md bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span :class="avatarBusy ? 'i-svg-spinners-180-ring-with-bg' : 'i-mynaui-upload'"
|
||||
class="text-4"></span>
|
||||
{{ avatarBusy ? 'Working…' : 'Upload image' }}
|
||||
</button>
|
||||
<button v-if="user?.image" type="button" :disabled="avatarBusy" @click="removeAvatar"
|
||||
class="flex items-center h-8 px-3 text-sm rounded-md border border-[var(--color-border)] text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<input ref="fileInput" type="file" class="hidden" :accept="ACCEPTED_TYPES.join(',')"
|
||||
aria-label="Upload a profile picture" @change="handleFileChange" />
|
||||
<p v-if="avatarError" role="alert" class="text-xs text-red-400">{{ avatarError }}</p>
|
||||
<p v-else class="text-xs text-[var(--text-secondary)]">
|
||||
PNG, JPG or WebP up to 10MB.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form class="flex flex-row flex-wrap items-center justify-between gap-x-16 gap-y-2"
|
||||
@submit.prevent="saveName">
|
||||
<label class="whitespace-nowrap" for="profile-name">Display name</label>
|
||||
<div class="flex flex-col gap-1 flex-1 min-w-60 max-w-120">
|
||||
<div class="flex gap-2">
|
||||
<input id="profile-name" v-model="name" type="text" autocomplete="name" maxlength="64"
|
||||
class="flex-1 min-w-0 h-8.5 px-2.5 text-sm rounded-md bg-[var(--bg-container)] placeholder:text-[var(--text-tertiary)]" />
|
||||
<button type="submit" :disabled="!nameChanged || nameSaving"
|
||||
class="h-8.5 px-3 items-center text-sm font-semibold rounded-md bg-[var(--color-accent)] text-[var(--color-accent-text)] disabled:opacity-40 disabled:cursor-not-allowed transition-opacity duration-200">
|
||||
{{ nameSaving ? 'Saving…' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="nameError" role="alert" class="text-xs text-red-400">{{ nameError }}</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row flex-wrap items-center justify-between gap-x-16 gap-y-2">
|
||||
<span class="whitespace-nowrap">Email</span>
|
||||
<span class="flex-1 min-w-60 max-w-120 text-sm text-[var(--text-secondary)] overflow-hidden text-ellipsis">
|
||||
{{ user?.email }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap items-center justify-between gap-x-16 gap-y-2">
|
||||
<span class="whitespace-nowrap">Member since</span>
|
||||
<span class="flex-1 min-w-60 max-w-120 text-sm text-[var(--text-secondary)]">
|
||||
{{ memberSince }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,654 @@
|
||||
<script setup lang="ts">
|
||||
import { sortByReleaseDate } from '~/utils/sort';
|
||||
import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
|
||||
import { type Model } from '~/types/model';
|
||||
import ModelItem from '~/components/Settings/ModelItem.vue';
|
||||
import RowVirtualizerDynamic from '~/components/RowVirtualizerDynamic.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const providerId = computed(() => route.params.id as string | undefined);
|
||||
|
||||
const { providers, updateProvider, createModel, updateModel } = await useModels();
|
||||
|
||||
const scrollContainerRef = ref<HTMLDivElement | null>(null);
|
||||
|
||||
const provider = computed(() => {
|
||||
if (providerId.value === undefined) return null;
|
||||
return providers.value!.find(p => p.id === providerId.value);
|
||||
});
|
||||
|
||||
watch(provider, async () => {
|
||||
if (!provider.value) return;
|
||||
await decryptApiKey();
|
||||
});
|
||||
|
||||
const apiKeyVisible = ref(false);
|
||||
|
||||
const apiKey = ref('');
|
||||
const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? '');
|
||||
const modelSearch = ref('');
|
||||
|
||||
watch(() => providerId.value, () => {
|
||||
if (providerId.value === undefined) return;
|
||||
apiKey.value = provider.value?.config.apiKey ?? '';
|
||||
apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
|
||||
modelSearch.value = '';
|
||||
apiKeyVisible.value = false;
|
||||
|
||||
nextTick(() => {
|
||||
if (scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTo({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const decryptApiKey = async () => {
|
||||
if (!provider.value?.config.apiKey) {
|
||||
apiKey.value = '';
|
||||
return
|
||||
};
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
"jwk",
|
||||
JSON.parse(window.localStorage.getItem("encryptionKey")!),
|
||||
"AES-GCM",
|
||||
false,
|
||||
["encrypt", "decrypt"]
|
||||
);
|
||||
apiKey.value = await decrypt(key, base64ToUint8Array(provider.value!.config.apiKey));
|
||||
}
|
||||
|
||||
if (import.meta.client) {
|
||||
await decryptApiKey();
|
||||
};
|
||||
|
||||
const toggleProvider = async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
enabled: !provider.value!.enabled,
|
||||
});
|
||||
};
|
||||
|
||||
let apiKeyTimeout: NodeJS.Timeout | undefined;
|
||||
|
||||
const updateApiKey = async (value: string) => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
"jwk",
|
||||
JSON.parse(window.localStorage.getItem("encryptionKey")!),
|
||||
"AES-GCM",
|
||||
false,
|
||||
["encrypt", "decrypt"]
|
||||
);
|
||||
const encypted = await encryptData(key, value);
|
||||
|
||||
if (apiKeyTimeout) {
|
||||
clearTimeout(apiKeyTimeout);
|
||||
}
|
||||
|
||||
apiKeyTimeout = setTimeout(async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
config: {
|
||||
...provider.value!.config,
|
||||
apiKey: uint8ArrayToBase64(encypted),
|
||||
},
|
||||
});
|
||||
}, 700);
|
||||
};
|
||||
|
||||
let proxyUrlTimeout: NodeJS.Timeout | undefined;
|
||||
|
||||
const updateProxyUrl = async (value: string) => {
|
||||
if (!provider.value) return;
|
||||
|
||||
apiProxyUrl.value = value;
|
||||
|
||||
if (proxyUrlTimeout) {
|
||||
clearTimeout(proxyUrlTimeout);
|
||||
}
|
||||
|
||||
proxyUrlTimeout = setTimeout(async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
config: {
|
||||
...provider.value!.config,
|
||||
apiProxyUrl: value,
|
||||
},
|
||||
});
|
||||
}, 700);
|
||||
};
|
||||
|
||||
const fetchingModels = ref(false);
|
||||
|
||||
const fetchModels = async () => {
|
||||
fetchingModels.value = true;
|
||||
|
||||
try {
|
||||
const response = await $fetch(`/api/provider/${provider.value!.id}/models`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
providerApiKey: apiKey.value
|
||||
}
|
||||
});
|
||||
|
||||
// Simply update the local state with the returned models
|
||||
if (provider.value && response.models) {
|
||||
provider.value.models = response.models as Model[];
|
||||
}
|
||||
|
||||
// Optional: show a success toast
|
||||
} catch (error: any) {
|
||||
console.error('Failed to fetch models:', error);
|
||||
// handle error (toast, etc)
|
||||
} finally {
|
||||
fetchingModels.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const deleteModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
provider.value!.models = [];
|
||||
await $fetch(`/api/provider/${provider.value!.id}/models`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
const enableAllModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const originalModels = provider.value.models;
|
||||
|
||||
await $fetch(`/api/provider/${provider.value.id}/models`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
enabled: true
|
||||
},
|
||||
onRequest() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = provider.value?.models.map(m => ({ ...m, enabled: true })) ?? [];
|
||||
},
|
||||
onResponseError() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = originalModels;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const disableAllModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const originalModels = provider.value.models;
|
||||
|
||||
await $fetch(`/api/provider/${provider.value.id}/models`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
enabled: false
|
||||
},
|
||||
onRequest() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = provider.value.models.map(m => ({ ...m, enabled: false }));
|
||||
},
|
||||
onResponseError() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = originalModels;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const enabledModels = computed(() =>
|
||||
filterModels(provider.value?.models.filter(m => m.enabled === true) as Model[] || [], modelSearch.value)
|
||||
.sort(sortByReleaseDate)
|
||||
)
|
||||
|
||||
const disabledModels = computed(() =>
|
||||
filterModels(provider.value?.models.filter(m => m.enabled === false) as Model[] || [], modelSearch.value)
|
||||
.sort(sortByReleaseDate)
|
||||
)
|
||||
|
||||
// ============================================
|
||||
// Custom Model Add/Edit Panel
|
||||
// ============================================
|
||||
|
||||
const showAddModelPanel = ref(false);
|
||||
const editingModel = ref<Model | null>(null);
|
||||
|
||||
interface ModelFormData {
|
||||
name: string;
|
||||
externalId: string;
|
||||
contextWindow: string;
|
||||
capabilities: string[];
|
||||
promptCost: string;
|
||||
completionCost: string;
|
||||
reasoning: boolean;
|
||||
tools: boolean;
|
||||
vision: boolean;
|
||||
}
|
||||
|
||||
const defaultFormData: ModelFormData = {
|
||||
name: '',
|
||||
externalId: '',
|
||||
contextWindow: '',
|
||||
capabilities: [],
|
||||
promptCost: '',
|
||||
completionCost: '',
|
||||
reasoning: false,
|
||||
tools: false,
|
||||
vision: false,
|
||||
};
|
||||
|
||||
const formData = ref<ModelFormData>({ ...defaultFormData });
|
||||
|
||||
const availableCapabilities = ['reasoning', 'tools', 'vision'];
|
||||
|
||||
const toggleCapability = (cap: string) => {
|
||||
const idx = formData.value.capabilities.indexOf(cap);
|
||||
if (idx === -1) {
|
||||
formData.value.capabilities.push(cap);
|
||||
} else {
|
||||
formData.value.capabilities.splice(idx, 1);
|
||||
}
|
||||
|
||||
if (cap === 'reasoning') {
|
||||
formData.value.reasoning = formData.value.capabilities.includes('reasoning');
|
||||
} else if (cap === 'tools') {
|
||||
formData.value.tools = formData.value.capabilities.includes('tools');
|
||||
} else if (cap === 'vision') {
|
||||
formData.value.vision = formData.value.capabilities.includes('vision');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formData.value = { ...defaultFormData };
|
||||
formData.value.capabilities = [];
|
||||
editingModel.value = null;
|
||||
};
|
||||
|
||||
const openAddPanel = () => {
|
||||
resetForm();
|
||||
showAddModelPanel.value = true;
|
||||
};
|
||||
|
||||
const openEditPanel = (model: Model) => {
|
||||
editingModel.value = model;
|
||||
formData.value = {
|
||||
name: model.name || '',
|
||||
externalId: model.externalId || '',
|
||||
contextWindow: model.contextWindow?.toString() || '',
|
||||
capabilities: model.capabilities,
|
||||
promptCost: model.cost?.prompt || '',
|
||||
completionCost: model.cost?.completion || '',
|
||||
reasoning: model.capabilities.includes('reasoning'),
|
||||
tools: model.capabilities.includes('tools'),
|
||||
vision: model.capabilities.includes('vision'),
|
||||
};
|
||||
showAddModelPanel.value = true;
|
||||
};
|
||||
|
||||
const { user } = useAuth();
|
||||
|
||||
// Preview model that reacts to form changes
|
||||
const previewModel = computed(() => {
|
||||
if (!formData.value.name || !formData.value.externalId) return null;
|
||||
|
||||
const inputModalities = ['text'];
|
||||
const outputModalities = ['text'];
|
||||
|
||||
if (formData.value.capabilities.includes('vision')) {
|
||||
inputModalities.push('image');
|
||||
}
|
||||
|
||||
return {
|
||||
userId: user.value?.id!,
|
||||
id: editingModel.value?.id || 'preview',
|
||||
providerId: provider.value?.id || '',
|
||||
name: formData.value.name,
|
||||
externalId: formData.value.externalId || 'model/id',
|
||||
cost: {
|
||||
prompt: formData.value.promptCost ? formatMoney(formData.value.promptCost) : undefined,
|
||||
completion: formData.value.completionCost ? formatMoney(formData.value.completionCost) : undefined,
|
||||
},
|
||||
inputModalities,
|
||||
outputModalities,
|
||||
capabilities: formData.value.capabilities.filter(c => c !== 'vision') as any,
|
||||
contextWindow: formData.value.contextWindow ? parseInt(formData.value.contextWindow) : null,
|
||||
supportedParameters: [],
|
||||
isCustom: true,
|
||||
enabled: true,
|
||||
provider: provider.value!,
|
||||
releasedAt: null,
|
||||
} as Model;
|
||||
});
|
||||
|
||||
const saveCustomModel = async () => {
|
||||
if (!provider.value || !formData.value.name || !formData.value.externalId) return;
|
||||
|
||||
const { id, ...previewModelWithoutId } = previewModel.value!;
|
||||
if (editingModel.value) {
|
||||
await updateModel(editingModel.value!.id, { ...previewModelWithoutId });
|
||||
} else {
|
||||
await createModel(previewModelWithoutId as Model);
|
||||
}
|
||||
|
||||
showAddModelPanel.value = false;
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const cancelPanel = () => {
|
||||
showAddModelPanel.value = false;
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const formatMoney = (value: string) => {
|
||||
// ensure that there are two decimal places MINIMUM I WILL STRANGLE YOU SO HELP ME GOD
|
||||
let [integerPart, fractionalPart] = value.split('.');
|
||||
|
||||
if (fractionalPart === undefined || fractionalPart === '') {
|
||||
fractionalPart = '00';
|
||||
}
|
||||
|
||||
if (fractionalPart.length === 1) {
|
||||
fractionalPart += '0';
|
||||
}
|
||||
|
||||
if (integerPart!.length === 0) {
|
||||
integerPart = '0';
|
||||
}
|
||||
|
||||
return `${integerPart}.${fractionalPart}`;
|
||||
}
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return formData.value.name.trim() && formData.value.externalId.trim();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="scrollContainerRef"
|
||||
class="flex flex-col gap-4 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]"
|
||||
v-if="provider">
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">Enabled</label>
|
||||
<Slider :checked="provider.enabled" @click.stop="toggleProvider()" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">API Key</label>
|
||||
<div class="text-sm font-mono flex flex-row rounded-md bg-[var(--bg-container)] items-center gap-1 w-7/10">
|
||||
<input class="placeholder:text-[var(--text-tertiary)] w-full p-0 pl-2 py-1 bg-transparent"
|
||||
:type="apiKeyVisible ? 'text' : 'password'" id="provider-api-key" :value="apiKey"
|
||||
autocomplete="false" spellcheck="false"
|
||||
@input="updateApiKey(($event.target! as HTMLInputElement).value)" />
|
||||
<button @click="apiKeyVisible = !apiKeyVisible"
|
||||
class="text-sm p-2 text-[var(--text-secondary)] @hover:text-[var(--text-primary)]">
|
||||
<span class="text-4" :class="apiKeyVisible ? 'i-mynaui-eye' : 'i-mynaui-eye-slash'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">API Proxy URL</label>
|
||||
<div class="text-sm font-mono flex flex-row rounded-md bg-[var(--bg-container)] items-center gap-1 w-7/10">
|
||||
<input :placeholder="provider.defaultBaseUrl || ''"
|
||||
class="placeholder:text-[var(--text-tertiary)] w-full px-2 py-1 bg-transparent" type="text"
|
||||
id="provider-proxy-url" :value="apiProxyUrl"
|
||||
@input="updateProxyUrl(($event.target! as HTMLInputElement).value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center text-xs">
|
||||
<p class="text-[var(--text-secondary)]">
|
||||
<span class="i-mynaui-lock inline-block"></span> Your API key is encrypted using
|
||||
<a href="https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01">AES-GCM</a> encryption.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="pt-5 justify-between w-full flex flex-wrap gap-y-1 items-center">
|
||||
<h4 class="whitespace-nowrap m-0 flex gap-x-2 items-start">
|
||||
Model List
|
||||
<span class="text-sm text-[var(--text-secondary)] font-normal text-xs flex items-center gap-1">
|
||||
{{ provider?.models.length }} models available
|
||||
<Dropdown placement="bottom">
|
||||
<template #default="{ toggle, setRef }">
|
||||
<button :ref="setRef" @click="toggle"
|
||||
class="p-0.5 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
|
||||
<span class="i-mynaui-x-solid"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template #dropdown="{ close }">
|
||||
<div class="px-3 py-2.5 w-64 flex flex-col gap-3">
|
||||
<p class="text-sm text-[var(--text-primary)] m-0 leading-snug text-center">
|
||||
Are you sure you want to delete all models? This will remove
|
||||
<strong>all</strong> fetched models for this provider
|
||||
</p>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button @click="close()"
|
||||
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200 border border-[var(--color-border)] @hover:border-transparent">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="deleteModels(); close()"
|
||||
class="px-3 py-1.5 text-sm bg-red-500 text-white rounded-md @hover:bg-red-600 transition-colors duration-200">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center justify-center px-2 py-1 bg-[var(--bg-container)] text-xs rounded-md">
|
||||
<input class="placeholder:text-[var(--text-tertiary)] p-0 bg-transparent" v-model="modelSearch"
|
||||
type="text" placeholder="Search models..." />
|
||||
<button :class="modelSearch.length > 0 ? 'visible' : 'invisible'" @click="modelSearch = ''"
|
||||
class="right-1 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200 p-0.5">
|
||||
<span class="i-mynaui-x-solid text-3.5 block text-[var(--text-secondary)]"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button @click="fetchModels"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-refresh" :class="{ 'animate-rotate': fetchingModels }"></span>
|
||||
fetch models
|
||||
</button>
|
||||
|
||||
<div class="flex">
|
||||
<button @click="openAddPanel"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-l-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-plus-solid text-5"></span>
|
||||
</button>
|
||||
|
||||
<div class="relative">
|
||||
<Dropdown placement="bottom-end">
|
||||
<template #default="{ toggle, setRef }">
|
||||
<button :ref="setRef" @click="toggle"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-r-md items-center px-1 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-dots-vertical text-5"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #dropdown="{ close }">
|
||||
<button @click="enableAllModels(); close()"
|
||||
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
|
||||
<span class="text-5 i-mynaui-toggle-right-solid"></span>
|
||||
Enable All
|
||||
</button>
|
||||
<button @click="disableAllModels(); close()"
|
||||
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
|
||||
<span class="text-5 i-mynaui-toggle-left"></span>
|
||||
Disable All
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Custom Model Panel -->
|
||||
<div class="mt-2">
|
||||
<!-- Expansion panel with grid-template-rows animation -->
|
||||
<div class="grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="showAddModelPanel ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="pt-3 pb-4 px-3 bg-[var(--bg-container)] border border-[var(--color-border)] rounded-lg mt-2">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h5 class="text-sm font-medium text-[var(--text-primary)] m-0">
|
||||
{{ editingModel ? 'Edit Custom Model' : 'Add Custom Model' }}
|
||||
</h5>
|
||||
<button @click="cancelPanel"
|
||||
class="p-1 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
|
||||
<span class="i-mynaui-x text-4 text-[var(--text-secondary)]"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Model Name -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Model Name</label>
|
||||
<input v-model="formData.name" type="text" placeholder="e.g., GPT-4 Turbo"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Model ID -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Model ID</label>
|
||||
<input v-model="formData.externalId" type="text" placeholder="e.g., gpt-4-turbo"
|
||||
class="w-full px-3 py-2 text-sm font-mono bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Context Window -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Context Window (tokens)</label>
|
||||
<input v-model="formData.contextWindow" type="text" placeholder="e.g., 128000"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Capabilities</label>
|
||||
<div class="flex gap-2">
|
||||
<button v-for="cap in availableCapabilities" :key="cap"
|
||||
@click="toggleCapability(cap)"
|
||||
class="px-3 py-1.5 text-xs rounded-md border transition-colors duration-200 capitalize"
|
||||
:class="formData.capabilities.includes(cap)
|
||||
? 'bg-[var(--color-accent)] text-white border-[var(--color-accent)]'
|
||||
: 'bg-[var(--bg-surface)] border-[var(--color-border)] text-[var(--text-secondary)] @hover:border-[var(--color-accent)]'">
|
||||
{{ cap }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Prompt Cost ($/1M
|
||||
tokens)</label>
|
||||
<input v-model="formData.promptCost" type="text" placeholder="e.g., 10.00"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Completion Cost ($/1M
|
||||
tokens)</label>
|
||||
<input v-model="formData.completionCost" type="text" placeholder="e.g., 30.00"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div v-if="previewModel" class="mt-3 pt-3 border-t border-[var(--color-border)]">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="i-mynaui-eye text-3.5 text-[var(--text-secondary)]"></span>
|
||||
<span class="text-xs text-[var(--text-secondary)]">Preview</span>
|
||||
</div>
|
||||
<div
|
||||
class="p-3 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md">
|
||||
<ModelInfo :details="true" :model="previewModel!" :show-edit="false"
|
||||
:show-cost="true" :show-external-id="true" :show-release-date="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex items-center justify-between pt-2 mt-1 border-t border-[var(--color-border)]">
|
||||
<span class="text-xs text-[var(--text-tertiary)]">
|
||||
{{
|
||||
editingModel
|
||||
? 'Changes will be saved to existing model'
|
||||
: 'Creates a new custom model'
|
||||
}}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<button @click="cancelPanel"
|
||||
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="saveCustomModel" :disabled="!isFormValid"
|
||||
class="px-3 py-1.5 text-sm bg-[var(--color-accent)] text-white rounded-md @hover:opacity-90 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{{ editingModel ? 'Save Changes' : 'Add Model' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
|
||||
<span class="i-mynaui-info-circle text-4"></span>
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
No models found
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ClientOnly v-else>
|
||||
<div v-if="enabledModels.length > 0" class="flex flex-col gap-1">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
Enabled
|
||||
</span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<RowVirtualizerDynamic :items="enabledModels" key-field="id"
|
||||
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
|
||||
<template v-slot="{ item: model }">
|
||||
<ModelItem :model="model" @edit="openEditPanel" />
|
||||
</template>
|
||||
</RowVirtualizerDynamic>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="disabledModels.length > 0" class="flex flex-col gap-1">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
Disabled
|
||||
</span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<RowVirtualizerDynamic :items="disabledModels" key-field="id"
|
||||
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
|
||||
<template v-slot="{ item: model }">
|
||||
<ModelItem :model="model" @edit="openEditPanel" />
|
||||
</template>
|
||||
</RowVirtualizerDynamic>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { providerIcons } from '~/utils/model-mapping';
|
||||
|
||||
const { providers, updateProvider } = await useModels();
|
||||
|
||||
if (providers.value === undefined) throw new Error('Providers not loaded');
|
||||
|
||||
const toggleProvider = async (id: string) => {
|
||||
const provider = providers.value!.find(p => p.id === id);
|
||||
if (!provider) return;
|
||||
|
||||
await updateProvider(provider.id, {
|
||||
enabled: !provider.enabled,
|
||||
});
|
||||
};
|
||||
|
||||
const openProvider = (id: string) => navigateTo(`/settings/providers/${id}`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-1 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
Enabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
||||
{{providers?.filter(p => p.enabled).length}}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
||||
<button @click="openProvider(p.id)" v-for="p in providers?.filter(p => p.enabled)"
|
||||
:key="p.id"
|
||||
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
|
||||
<div class="flex flex-col flex-grow">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="w-8 h-8 text-[var(--text-primary)]" />
|
||||
<h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
|
||||
</div>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
Disabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
||||
{{providers?.filter(p => !p.enabled).length}}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
||||
<button @click="openProvider(p.id)" v-for="p in providers?.filter(p => !p.enabled)"
|
||||
:key="p.id"
|
||||
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
|
||||
<div class="flex flex-col flex-grow">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="w-8 h-8 text-[var(--text-primary)]" />
|
||||
<h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
|
||||
</div>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user