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>