veridian/app/components/ModelInfo.vue

<script setup lang="ts">
import type { Entity } from '@triplit/client';
import type schema from '#triplit/schema';

const props = withDefaults(defineProps<{
    model: Entity<typeof schema, 'models'>;
    size?: 'small' | 'medium' | 'large';
    details?: boolean;
    showCost?: boolean;
    showEdit?: boolean;
    showExternalId?: boolean;
    showReleaseDate?: boolean;
}>(), {
    size: 'large',
    details: false,
    showCost: false,
    showExternalId: false,
    showReleaseDate: false,
    showEdit: false,
});

const triplit = useTriplitClient();

const formatContextWindow = (window: number | null | undefined): string => {
    if (!window) return '';
    if (window >= 1000000) return `${(window / 1000000).toFixed(0)}M`;
    if (window >= 1000) return `${(window / 1000).toFixed(0)}K`;
    return window.toString();
};

const hasCapability = (capability: string): boolean => {
    return props.model.attributes.capabilities.has(capability);
};

const hasInputModality = (modality: string): boolean => {
    return (props.model.attributes.inputModalities as Readonly<Set<string>>).has(modality);
};

const showCost = computed(() => {
    return props.showCost && (props.model.cost.prompt || props.model.cost.completion || props.model.cost.request);
});

const toggleModel = async (id: string) => {
    await triplit.update('models', id, {
        enabled: !props.model.enabled,
    });
};

const deleteModel = async () => {
    await triplit.delete('models', props.model.id);
};
</script>

<template>
    <div class="flex items-center justify-between w-full" v-bind="$attrs">
        <div class="flex items-center gap-2 min-w-0 flex-1">
            <ModelIcon :class="{
                'rounded-lg overflow-hidden': size === 'large',
                'rounded-md overflow-hidden': size === 'medium' || size === 'small',
            }" :avatar="true" variant="color" :key="model.externalId" :model-id="model.externalId"
                :size="size === 'small' ? '20' : size === 'medium' ? '26' : '32'" />

            <div class="flex flex-col gap-1 min-w-0 flex-1">
                <div class="flex items-center gap-1 min-w-0">
                    <span class="text-[15px] font-medium text-[var(--text-primary)] truncate min-w-0">
                        {{ model.name }}
                    </span>
                    <span v-if="showExternalId" :title="model.externalId"
                        class="text-xs text-[var(--text-secondary)] px-1 py-0.5 rounded bg-[var(--bg-container)] whitespace-nowrap truncate max-w-[240px]">
                        {{ model.externalId }}
                    </span>
                    <div v-if="showEdit" class="flex items-center gap-2">
                        <button @click="deleteModel"
                            class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 trannsition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                            <Icon name="mynaui:trash" class="text-3.5" />
                        </button>
                    </div>
                </div>

                <div v-if="details" class="flex items-center gap-1.5 flex-wrap text-[var(--text-tertiary)]">
                    <span v-if="showReleaseDate && model.releasedAt" class="text-xs whitespace-nowrap">
                        Released on {{ model.releasedAt.toISOString().split('T')[0] }}
                    </span>
                    <template v-if="showCost">
                        <span v-if="model.cost.prompt" class="text-xs whitespace-nowrap flex items-center">
                            <span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
                            ${{ model.cost.prompt }}/M input
                        </span>
                        <span v-if="model.cost.completion" class="text-xs whitespace-nowrap flex items-center">
                            <span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
                            ${{ model.cost.completion }}/M output
                        </span>
                        <span v-if="model.cost.request && model.cost.request !== '0'"
                            class="text-xs whitespace-nowrap flex items-center">
                            <span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
                            {{ model.cost.request }}/request
                        </span>
                    </template>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-1 shrink-0">
            <div class="flex items-center gap-0.5">
                <div v-if="hasInputModality('image')"
                    class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
                    <Icon name="mynaui:image" class="text-2.5 text-emerald" title="Vision" />
                </div>
                <div v-if="hasCapability('reasoning')"
                    class="w-4.5 h-4.5 bg-[color-mix(in_srgb,_transparent_90%,_var(--reasoning-accent)_10%)] rounded flex items-center justify-center">
                    <Icon name="mynaui:atom" class="text-2.5 text-[var(--reasoning-accent)]" title="Reasoning" />
                </div>
                <div v-if="hasCapability('tools')"
                    class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
                    <Icon name="mynaui:tool" class="text-2.5 text-sky" title="Tools" />
                </div>
            </div>

            <span v-if="model.attributes.contextWindow"
                class="text-xs font-mono text-[var(--text-secondary)] px-1.5 py-0.5 rounded bg-[var(--bg-container)]">
                {{ formatContextWindow(model.attributes.contextWindow) }}
            </span>

            <Slider v-if="showEdit" :checked="model.enabled" @click="toggleModel(model.id)" />
        </div>
    </div>
</template>