zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ditch triplit, move to postgresql + drizzle orm

Browse Source
This commit is contained in:
Zoe
2026-04-08 17:03:07 -05:00
parent c341c96798
commit e2e3ac6e86
121 changed files with 6680 additions and 4373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Settings/AIServiceProvider.vue
+120 -108
View File
@@ -1,16 +1,15 @@
<script setup lang="ts">
import { sortByReleaseDate } from '~/utils/sort';
import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
import { providerBaseUrls, type Model } from '~/types/model';
import { providerBaseUrls, Providers, type Model } from '~/types/model';
import ModelItem from './ModelItem.vue';
import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
const triplit = useTriplitClient();
const props = defineProps<{
params?: string;
}>();
const { providers } = useModels();
const { providers, updateProvider, createModel, updateModel } = await useModels();
const scrollContainerRef = ref<HTMLDivElement | null>(null);
@@ -65,11 +64,13 @@ if (import.meta.client) {
};
const toggleProvider = async () => {
await triplit.update('providers', provider.value!.id, {
await updateProvider(provider.value!.id, {
enabled: !provider.value!.enabled,
});
};
let apiKeyTimeout: NodeJS.Timeout | undefined;
const updateApiKey = async (value: string) => {
if (!provider.value) return;
@@ -82,91 +83,63 @@ const updateApiKey = async (value: string) => {
);
const encypted = await encryptData(key, value);
await triplit.update('providers', provider.value.id, {
config: {
...provider.value.config,
apiKey: uint8ArrayToBase64(encypted),
},
});
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;
await triplit.update('providers', provider.value.id, {
config: {
...provider.value.config,
apiProxyUrl: 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 () => {
const { user } = useAuth()
fetchingModels.value = true;
try {
const modelsData = await $fetch(`/api/provider/${provider.value!.id}/models`, {
const response = await $fetch(`/api/provider/${provider.value!.id}/models`, {
method: 'POST',
body: JSON.stringify({
body: {
providerApiKey: apiKey.value
})
}) as any;
const existingModelsMap = new Map(
(provider.value?.models || []).map((m: any) => [m.externalId, m])
);
const toInsert: any[] = [];
const toUpdate: { id: string, data: any }[] = [];
for (const model of modelsData.models) {
const existing = existingModelsMap.get(model.id);
if (existing) {
const { id, ...existingWithoutId } = model;
console.log("existingWithoutId", existingWithoutId);
toUpdate.push({
id: existing.id,
data: existingWithoutId,
});
} else {
toInsert.push({
userId: user.value?.id!,
externalId: model.id,
providerId: provider.value!.id!,
name: model.name || model.id,
cost: model.cost || {},
attributes: model.attributes,
isCustom: false,
enabled: false,
releasedAt: model.releasedAt,
});
}
});
// Simply update the local state with the returned models
if (provider.value && response.models) {
provider.value.models = response.models as Model[];
}
// delete models that are not in the API response and are not custom models
const apiModelIds = new Set(modelsData.models.values().map((m: any) => m.id));
console.log("apiModelIds", apiModelIds);
const toDelete = (provider.value?.models || []).filter((m: any) =>
!m.isCustom && !apiModelIds.has(m.externalId)
);
console.log({ toUpdate, toInsert, toDelete });
await Promise.all([
...toInsert.map(item => triplit.insert('models', item)),
...toUpdate.map(item => triplit.update('models', item.id, item.data)),
...toDelete.map(item => triplit.delete('models', item.id))
]);
} catch (error) {
// Optional: show a success toast
} catch (error: any) {
console.error('Failed to fetch models:', error);
// handle error (toast, etc)
} finally {
fetchingModels.value = false;
}
@@ -175,23 +148,64 @@ const fetchModels = async () => {
const deleteModels = async () => {
if (!provider.value) return;
await Promise.all(provider.value.models.map(m => triplit.delete('models', m.id)));
provider.value!.models = [];
await $fetch(`/api/provider/${provider.value!.id}/models`, {
method: 'DELETE',
});
};
const enableAllModels = async () => {
if (!provider.value) return;
await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
enabled: true
})));
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;
await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
enabled: false
})));
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(() =>
@@ -272,13 +286,13 @@ const openEditPanel = (model: Model) => {
formData.value = {
name: model.name || '',
externalId: model.externalId || '',
contextWindow: model.attributes?.contextWindow?.toString() || '',
capabilities: [...(model.attributes?.capabilities || [])],
contextWindow: model.contextWindow?.toString() || '',
capabilities: model.capabilities,
promptCost: model.cost?.prompt || '',
completionCost: model.cost?.completion || '',
reasoning: model.attributes?.capabilities?.has('reasoning') || false,
tools: model.attributes?.capabilities?.has('tools') || false,
vision: model.attributes?.capabilities?.has('vision') || false,
reasoning: model.capabilities.includes('reasoning'),
tools: model.capabilities.includes('tools'),
vision: model.capabilities.includes('vision'),
};
showAddModelPanel.value = true;
};
@@ -289,11 +303,11 @@ const { user } = useAuth();
const previewModel = computed(() => {
if (!formData.value.name || !formData.value.externalId) return null;
const inputModalities = new Set<string>(['text']);
const outputModalities = new Set<string>(['text']);
const inputModalities = ['text'];
const outputModalities = ['text'];
if (formData.value.capabilities.includes('vision')) {
inputModalities.add('image');
inputModalities.push('image');
}
return {
@@ -306,15 +320,15 @@ const previewModel = computed(() => {
prompt: formData.value.promptCost ? formatMoney(formData.value.promptCost) : undefined,
completion: formData.value.completionCost ? formatMoney(formData.value.completionCost) : undefined,
},
attributes: {
inputModalities,
outputModalities,
capabilities: new Set(formData.value.capabilities.filter(c => c !== 'vision') as any),
contextWindow: formData.value.contextWindow ? parseInt(formData.value.contextWindow) : null,
},
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;
});
@@ -323,11 +337,9 @@ const saveCustomModel = async () => {
const { id, ...previewModelWithoutId } = previewModel.value!;
if (editingModel.value) {
// Update existing model
await triplit.update('models', editingModel.value.id, previewModelWithoutId);
await updateModel(editingModel.value!.id, { ...previewModelWithoutId });
} else {
// Insert new custom model
await triplit.insert('models', previewModelWithoutId);
await createModel(previewModelWithoutId);
}
showAddModelPanel.value = false;
@@ -382,7 +394,7 @@ defineEmits(['navigate']);
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)]">
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>
@@ -391,7 +403,7 @@ defineEmits(['navigate']);
<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.type ? providerBaseUrls[provider.type] ?? '' : ''"
<input :placeholder="provider.type ? providerBaseUrls[provider.type as typeof Providers[number]] : ''"
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)" />
@@ -411,7 +423,7 @@ defineEmits(['navigate']);
Model List
<span class="text-sm text-[var(--text-secondary)] font-normal text-xs flex items-center gap-1">
{{ provider?.models.length }} models available <button
class="p-0.5 hover:bg-[var(--color-hover)] rounded transition-colors duration-200"
class="p-0.5 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200"
@click="deleteModels">
<span class="i-mynaui-x-solid"></span>
</button>
@@ -423,20 +435,20 @@ defineEmits(['navigate']);
<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">
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)]">
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)]">
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 text-5"></span>
</button>
@@ -444,19 +456,19 @@ defineEmits(['navigate']);
<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)]">
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">
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">
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>
@@ -481,7 +493,7 @@ defineEmits(['navigate']);
{{ editingModel ? 'Edit Custom Model' : 'Add Custom Model' }}
</h5>
<button @click="cancelPanel"
class="p-1 hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
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>
@@ -518,7 +530,7 @@ defineEmits(['navigate']);
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)]'">
: 'bg-[var(--bg-surface)] border-[var(--color-border)] text-[var(--text-secondary)] @hover:border-[var(--color-accent)]'">
{{ cap }}
</button>
</div>
@@ -565,11 +577,11 @@ defineEmits(['navigate']);
</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">
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">
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>
@@ -595,7 +607,7 @@ defineEmits(['navigate']);
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="enabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" @edit="openEditPanel" />
</template>
@@ -609,7 +621,7 @@ defineEmits(['navigate']);
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="disabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" @edit="openEditPanel" />
</template>
app/components/Settings/AppearanceSettings.vue
+7 -7
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
const { colorScheme, settings, updateSettings } = useUserSettings();
const { colorScheme, settings, updateSettings } = await useUserSettings();
const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
const neutrals = ['zinc', 'slate', 'obsidian'];
@@ -27,19 +27,19 @@ defineEmits(['navigate']);
<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="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="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="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>
@@ -51,7 +51,7 @@ defineEmits(['navigate']);
<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="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" />
@@ -62,9 +62,9 @@ defineEmits(['navigate']);
<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="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'
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>
app/components/Settings/ModelItem.vue
+1 -1
View File
@@ -14,7 +14,7 @@ const handleEdit = (model: Model) => {
<template>
<div
class="p-3 text-white flex max-w-full items-center justify-between gap-2 group hover:bg-[var(--color-hover)] transition duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
class="min-h-17 p-3 text-white flex max-w-full items-center justify-between gap-2 group @hover:bg-[var(--color-hover)] transition duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<ModelInfo :details="true" :model="model" :show-edit="true" :show-cost="true" :show-external-id="true"
:show-release-date="true" @edit="handleEdit" />
</div>
app/components/Settings/ProviderSettings.vue
+4 -31
View File
@@ -1,9 +1,7 @@
<script setup lang="ts">
import { Providers } from '~/types/model';
import { providerIcons } from '~/utils/model-mapping';
const triplit = useTriplitClient();
const { providers } = useModels();
const { providers, updateProvider } = await useModels();
const props = defineProps<{
params?: string;
@@ -11,32 +9,11 @@ const props = defineProps<{
if (providers.value === undefined) throw new Error('Providers not loaded');
// TODO: sometimes this code can create duplicate providers
const { user } = useAuth();
for (const provider of Providers) {
if (!providers.value?.find(p => p.type === provider)) {
// create a new provider
await triplit.insert('providers', {
name: provider,
userId: user.value!.id,
type: provider,
enabled: false,
config: {},
});
}
}
for (const provider of providers.value) {
if (!Providers.includes(provider.type)) {
await triplit.delete('providers', provider.id);
}
}
const toggleProvider = async (id: string) => {
const provider = providers.value!.find(p => p.id === id);
if (!provider) return;
await triplit.update('providers', provider.id, {
await updateProvider(provider.id, {
enabled: !provider.enabled,
});
};
@@ -56,7 +33,7 @@ defineEmits(['navigate']);
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
<button @click="$emit('navigate', 'providers', 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)]">
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]"
@@ -66,8 +43,6 @@ defineEmits(['navigate']);
<hr class="border-t border-[var(--color-border)]" />
</div>
<div class="flex items-center justify-end">
<!-- <input type="checkbox"
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-border)]" /> -->
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
</div>
</button>
@@ -82,7 +57,7 @@ defineEmits(['navigate']);
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
<button @click="$emit('navigate', 'providers', 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)]">
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]"
@@ -92,8 +67,6 @@ defineEmits(['navigate']);
<hr class="border-t border-[var(--color-border)]" />
</div>
<div class="flex items-center justify-end">
<!-- <input type="checkbox"
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-border)]" /> -->
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
</div>
</button>
app/components/Settings/ProviderSidebar.vue
+5 -5
View File
@@ -4,7 +4,7 @@ import { providerIcons } from '~/utils/model-mapping';
defineProps<{
params?: string;
}>();
const { providers } = useModels();
const { providers } = await useModels();
defineEmits(['navigate']);
</script>
@@ -12,19 +12,19 @@ defineEmits(['navigate']);
<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)]">
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)]">
<span class="i-mynaui-chevron-left text-4"></span> 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)]">
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)]">
<span class="i-mynaui-envelope-open text-4"></span> 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="['case-capital 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 === params ? 'bg-[var(--color-hover)]' : '']">
:class="['case-capital 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 === params ? '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)]" />
@@ -36,7 +36,7 @@ defineEmits(['navigate']);
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
@click="$emit('navigate', 'providers', p.id)"
:class="['case-capital 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 === params ? 'bg-[var(--color-hover)]' : '']">
:class="['case-capital 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 === params ? '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)]" />
app/components/Settings/SystemAssistants.vue
+2 -3
View File
@@ -5,8 +5,8 @@ const props = defineProps<{
params?: string;
}>();
const { providers, allModels } = useModels();
const { settings, updateSettings } = useUserSettings();
const { providers, allModels } = await useModels();
const { settings, updateSettings } = await useUserSettings();
const toggle = async (key: string) => {
const current = (settings.value.systemAssistants as any)[key];
@@ -39,7 +39,6 @@ const getModel = (id: string | null | undefined) => {
}
defineEmits(['navigate']);
</script>
<template>