veridian/app/components/Settings/AIServiceProvider.vue

<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 './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;
    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();
});

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.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>