dashboard/src/components/provider/ProviderModelsPanel.vue

<template>
  <div class="mt-4">
    <div class="d-flex align-center ga-2 mb-2">
      <h3 class="text-h5 font-weight-bold mb-0">{{ tm('models.configured') }}</h3>
      <small style="color: grey;" v-if="availableCount">{{ tm('models.available') }} {{ availableCount }}</small>
      <v-text-field
        v-model="modelSearchProxy"
        density="compact"
        prepend-inner-icon="mdi-magnify"
        clearable
        hide-details
        variant="solo-filled"
        flat
        class="ml-1"
        style="max-width: 240px;"
        :placeholder="tm('models.searchPlaceholder')"
      />
      <v-spacer></v-spacer>
      <v-btn
        color="primary"
        prepend-icon="mdi-download"
        :loading="loadingModels"
        @click="emit('fetch-models')"
        variant="tonal"
        size="small"
      >
        {{ isSourceModified ? tm('providerSources.saveAndFetchModels') : tm('providerSources.fetchModels') }}
      </v-btn>
      <v-btn
        color="primary"
        prepend-icon="mdi-pencil-plus"
        variant="text"
        size="small"
        class="ml-1"
        @click="emit('open-manual-model')"
      >
        {{ tm('models.manualAddButton') }}
      </v-btn>
    </div>

    <v-list
      density="compact"
      class="rounded-lg border"
      style="max-height: 520px; overflow-y: auto; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"
    >
      <template v-if="entries.length > 0">
        <template v-for="entry in entries" :key="entry.type === 'configured' ? `provider-${entry.provider.id}` : `model-${entry.model}`">
          <v-tooltip location="top" max-width="400" v-if="entry.type === 'configured'">
            <template #activator="{ props }">
              <v-list-item
                v-bind="props"
                class="provider-compact-item"
                @click="emit('open-provider-edit', entry.provider)"
              >
                <v-list-item-title class="font-weight-medium text-truncate">
                  {{ entry.provider.id }}
                </v-list-item-title>
            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1" style="font-family: monospace;">
              <span>{{ entry.provider.model }}</span>
              <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
                mdi-eye-outline
              </v-icon>
              <v-icon v-if="supportsToolCall(entry.metadata)" size="14" color="grey">
                mdi-wrench
              </v-icon>
              <v-icon v-if="supportsReasoning(entry.metadata)" size="14" color="grey">
                mdi-brain
              </v-icon>
              <span v-if="formatContextLimit(entry.metadata)">
                {{ formatContextLimit(entry.metadata) }}
              </span>
            </v-list-item-subtitle>
            <template #append>
              <div class="d-flex align-center ga-1" @click.stop>
                <v-switch
                  v-model="entry.provider.enable"
                  density="compact"
                  inset
                  hide-details
                  color="primary"
                  class="mr-1"
                  @update:modelValue="emit('toggle-provider-enable', entry.provider, $event)"
                ></v-switch>
                <v-tooltip location="top" max-width="300">
                  {{ tm('availability.test') }}
                  <template #activator="{ props }">
                    <v-btn
                      icon="mdi-connection"
                      size="small"
                      variant="text"
                      :disabled="!entry.provider.enable"
                      :loading="isProviderTesting(entry.provider.id)"
                      v-bind="props"
                      @click.stop="emit('test-provider', entry.provider)"
                    ></v-btn>
                  </template>
                </v-tooltip>

                <v-tooltip location="top" max-width="300">
                  {{ tm('models.configure') }}
                  <template #activator="{ props }">
                    <v-btn
                      icon="mdi-cog"
                      size="small"
                      variant="text"
                      v-bind="props"
                      @click.stop="emit('open-provider-edit', entry.provider)"
                    ></v-btn>
                  </template>
                </v-tooltip>

                <v-btn icon="mdi-delete" size="small" variant="text" color="error" @click.stop="emit('delete-provider', entry.provider)"></v-btn>
              </div>
            </template>
              </v-list-item>
            </template>
            <div>
              <div><strong>{{ tm('models.tooltips.providerId') }}:</strong> {{ entry.provider.id }}</div>
              <div><strong>{{ tm('models.tooltips.modelId') }}:</strong> {{ entry.provider.model }}</div>
            </div>
          </v-tooltip>

          <v-tooltip location="top" max-width="400" v-else>
            <template #activator="{ props }">
              <v-list-item v-bind="props" class="cursor-pointer" @click="emit('add-model-provider', entry.model)">
                <v-list-item-title>{{ entry.model }}</v-list-item-title>
            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1">
              <span>{{ entry.model }}</span>
              <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
                mdi-eye-outline
              </v-icon>
              <v-icon v-if="supportsToolCall(entry.metadata)" size="14" color="grey">
                mdi-wrench
              </v-icon>
              <v-icon v-if="supportsReasoning(entry.metadata)" size="14" color="grey">
                mdi-brain
              </v-icon>
              <span v-if="formatContextLimit(entry.metadata)">
                {{ formatContextLimit(entry.metadata) }}
              </span>
            </v-list-item-subtitle>
                <template #append>
                  <v-btn icon="mdi-plus" size="small" variant="text" color="primary"></v-btn>
                </template>
              </v-list-item>
            </template>
            <div>
              <div><strong>{{ tm('models.tooltips.modelId') }}:</strong> {{ entry.model }}</div>
            </div>
          </v-tooltip>
        </template>
      </template>
      <template v-else>
        <div class="text-center pa-4 text-medium-emphasis">
          <v-icon size="48" color="grey-lighten-1">mdi-package-variant</v-icon>
          <p class="text-grey mt-2">{{ tm('models.empty') }}</p>
        </div>
      </template>
    </v-list>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { normalizeTextInput } from '@/utils/inputValue'

const props = defineProps({
  entries: {
    type: Array,
    default: () => []
  },
  availableCount: {
    type: Number,
    default: 0
  },
  modelSearch: {
    type: String,
    default: ''
  },
  loadingModels: {
    type: Boolean,
    default: false
  },
  isSourceModified: {
    type: Boolean,
    default: false
  },
  supportsImageInput: {
    type: Function,
    required: true
  },
  supportsToolCall: {
    type: Function,
    required: true
  },
  supportsReasoning: {
    type: Function,
    required: true
  },
  formatContextLimit: {
    type: Function,
    required: true
  },
  testingProviders: {
    type: Array,
    default: () => []
  },
  tm: {
    type: Function,
    required: true
  }
})

const emit = defineEmits([
  'update:modelSearch',
  'fetch-models',
  'open-manual-model',
  'open-provider-edit',
  'toggle-provider-enable',
  'test-provider',
  'delete-provider',
  'add-model-provider'
])

const modelSearchProxy = computed({
  get: () => props.modelSearch,
  set: (val) => emit('update:modelSearch', normalizeTextInput(val))
})

const isProviderTesting = (providerId) => props.testingProviders.includes(providerId)
</script>

<style scoped>
.border {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.cursor-pointer {
  cursor: pointer;
}
</style>