636 lines
28 KiB
Vue
636 lines
28 KiB
Vue
<script setup lang="ts">
|
|
import { sortByReleaseDate } from '~/utils/sort';
|
|
import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
|
|
import { providerBaseUrls, Providers, type Model } from '~/types/model';
|
|
import ModelItem from './ModelItem.vue';
|
|
import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
|
|
|
|
const props = defineProps<{
|
|
params?: string;
|
|
}>();
|
|
|
|
const { providers, updateProvider, createModel, updateModel } = await useModels();
|
|
|
|
const scrollContainerRef = ref<HTMLDivElement | null>(null);
|
|
|
|
const provider = computed(() => {
|
|
if (props.params === undefined) return null;
|
|
return providers.value!.find(p => p.id === props.params);
|
|
});
|
|
|
|
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(() => props.params, () => {
|
|
if (props.params === undefined) return;
|
|
console.log(scrollContainerRef.value);
|
|
apiKey.value = provider.value?.config.apiKey ?? '';
|
|
apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
|
|
modelSearch.value = '';
|
|
|
|
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);
|
|
}
|
|
|
|
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();
|
|
});
|
|
|
|
defineEmits(['navigate']);
|
|
</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.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)" />
|
|
</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 <button
|
|
class="p-0.5 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200"
|
|
@click="deleteModels">
|
|
<span class="i-mynaui-x-solid"></span>
|
|
</button>
|
|
</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 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>
|