@swiss-ai-hub/web 0.290.11

package/components/FormKit/LocaleInput.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <!-- Language Selector and Translate Button -->
+    <div class="mb-2 flex items-center gap-2">
+      <SelectButton
+        v-model="activeLocale"
+        :options="localeOptions"
+        option-label="label"
+        option-value="value"
+        size="small"
+      >
+        <template #option="{ option }">
+          <span>{{ option.label }}</span>
+          <!-- Filled indicator dot -->
+          <span
+            v-if="hasValue(option.value)"
+            class="absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-green-500"
+          />
+        </template>
+      </SelectButton>
+
+      <!-- Translate Button -->
+      <Button
+        v-if="canTranslate"
+        v-tooltip.top="t('form.locale_input.translate_tooltip')"
+        :loading="isTranslating"
+        :disabled="isTranslating"
+        icon="pi pi-language"
+        size="small"
+        severity="secondary"
+        text
+        @click="handleTranslate"
+      />
+    </div>
+
+    <!-- Text Input (single line) -->
+    <div class="relative">
+      <InputText
+        v-if="inputType === 'text'"
+        v-model="currentValue"
+        :placeholder="localizedPlaceholder"
+        class="w-full"
+      />
+
+      <!-- Textarea (multi-line) -->
+      <Textarea
+        v-else
+        v-model="currentValue"
+        :placeholder="localizedPlaceholder"
+        :rows="rows"
+        class="w-full"
+      />
+
+      <!-- Loading overlay -->
+      <div
+        v-if="isTranslating"
+        class="absolute inset-0 flex items-center justify-center rounded bg-surface-100/80 dark:bg-surface-800/80"
+      >
+        <i class="pi pi-spin pi-spinner text-xl" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LocaleStringDto } from '@core/sdk/client'
+
+interface LocaleInputProps {
+  context: {
+    node: {
+      input: (value: LocaleStringDto) => void
+    }
+    value?: LocaleStringDto
+    attrs: Record<string, unknown>
+    // Custom props are passed through context, not as direct Vue props
+    inputType?: 'text' | 'textarea'
+    rows?: number
+    placeholder?: LocaleStringDto
+  }
+}
+
+const props = defineProps<LocaleInputProps>()
+const { t } = useI18n()
+const { translate, isTranslating } = useTranslate()
+const { tenantId } = useTenant()
+
+// Get custom props from context (FormKit passes them there, not as direct props)
+const inputType = computed(() => props.context.inputType ?? 'text')
+const rows = computed(() => props.context.rows ?? 3)
+const placeholder = computed(() => props.context.placeholder)
+
+const locales = ['de', 'en', 'fr', 'it'] as const
+type Locale = (typeof locales)[number]
+
+const localeOptions = locales.map(lang => ({
+  label: lang.toUpperCase(),
+  value: lang,
+}))
+
+const activeLocale = ref<Locale>('en')
+
+// Get the current locale string value
+const localeValue = computed<LocaleStringDto>(() => {
+  return props.context.value ?? { de: null, en: null, fr: null, it: null }
+})
+
+// Current input value for the active locale
+const currentValue = computed({
+  get: () => localeValue.value[activeLocale.value] ?? '',
+  set: (newVal: string) => {
+    const updated: LocaleStringDto = {
+      ...localeValue.value,
+      [activeLocale.value]: newVal || null,
+    }
+    props.context.node.input(updated)
+  },
+})
+
+// Get localized placeholder for current locale
+const localizedPlaceholder = computed(() => {
+  if (!placeholder.value) return undefined
+  return placeholder.value[activeLocale.value] ?? placeholder.value.en ?? ''
+})
+
+function hasValue(lang: Locale): boolean {
+  const val = localeValue.value[lang]
+  return val !== null && val !== undefined && val !== ''
+}
+
+// Check if translation is possible (current locale has text and at least one other locale is empty)
+const canTranslate = computed(() => {
+  const currentText = localeValue.value[activeLocale.value]
+  if (!currentText) return false
+
+  // Check if any other locale is missing a value
+  return locales.some(lang => lang !== activeLocale.value && !hasValue(lang))
+})
+
+// Handle translation
+async function handleTranslate() {
+  const response = await translate({
+    request: {
+      text: localeValue.value,
+      source_locale: activeLocale.value,
+    },
+    tenantId: tenantId.value!,
+  })
+  props.context.node.input(response.translated)
+}
+</script>

package/components/FormKit/ModelSelect.vue

@@ -0,0 +1,110 @@
+<template>
+  <Select
+    v-model="selectedModel"
+    :options="models"
+    option-label="model_name"
+    option-value="model_name"
+    :placeholder="placeholder ?? t('common.selectModel')"
+    :filter="filter"
+    :show-clear="showClear"
+    :loading="isLoading"
+    class="w-full"
+  >
+    <template #option="{ option }">
+      <div class="flex items-center gap-2">
+        <Icon
+          :name="option.icon"
+          size="1.2em"
+        />
+        <span>{{ option.model_name }}</span>
+      </div>
+    </template>
+    <template #value="{ value }">
+      <div
+        v-if="value"
+        class="flex items-center gap-2"
+      >
+        <Icon
+          :name="getModelIcon(value)"
+          size="1.2em"
+        />
+        <span>{{ value }}</span>
+      </div>
+    </template>
+  </Select>
+</template>
+
+<script setup lang="ts">
+import { getLitellmModelsByMode } from '@core/sdk/client'
+
+import type { ModelDto } from '@core/sdk/client'
+
+interface ModelSelectProps {
+  context: {
+    node: {
+      input: (value: string | null) => void
+    }
+    value?: string | null
+    attrs: Record<string, unknown>
+    // Custom props are passed through context, not as direct Vue props
+    mode?: 'chat' | 'embedding' | 'rerank' | 'image_generation' | 'audio_transcription' | 'audio_speech'
+    placeholder?: string
+    filter?: boolean
+    showClear?: boolean
+  }
+}
+
+const props = defineProps<ModelSelectProps>()
+
+// Get custom props from context (FormKit passes them there, not as direct props)
+const mode = computed(() => props.context.mode ?? 'chat')
+const placeholder = computed(() => props.context.placeholder)
+const filter = computed(() => props.context.filter ?? true)
+const showClear = computed(() => props.context.showClear ?? false)
+
+const { t } = useI18n()
+const { tenantId } = useTenant()
+
+const models = ref<ModelDto[]>([])
+const isLoading = ref(false)
+
+const selectedModel = computed({
+  get: () => props.context.value ?? null,
+  set: (value: string | null) => {
+    props.context.node.input(value)
+  },
+})
+
+function getModelIcon(modelName: string): string {
+  const model = models.value.find(m => m.model_name === modelName)
+  return model?.icon ?? 'meteor-icons:cpu'
+}
+
+async function fetchModels() {
+  isLoading.value = true
+  try {
+    const response = await getLitellmModelsByMode({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value!, mode: mode.value },
+    })
+    models.value = response
+  }
+  catch (error) {
+    console.error(`Failed to fetch models for mode "${mode.value}":`, error)
+    models.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+// Fetch models on mount
+onMounted(() => {
+  fetchModels()
+})
+
+// Refetch if mode changes
+watch(mode, () => {
+  fetchModels()
+})
+</script>

package/components/FormKit/Repeater.vue

@@ -0,0 +1,93 @@
+<template>
+  <fieldset class="mb-4 rounded-lg border border-surface-300 p-4 dark:border-surface-600">
+    <legend class="px-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+      {{ label }}
+    </legend>
+
+    <div class="flex flex-col gap-3">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="relative rounded-lg border border-surface-200 p-4 dark:border-surface-700"
+      >
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-medium text-surface-600 dark:text-surface-400">
+            #{{ index + 1 }}
+          </span>
+          <Button
+            type="button"
+            icon="pi pi-trash"
+            severity="danger"
+            text
+            size="small"
+            :disabled="isRemoveDisabled"
+            @click.prevent.stop="removeItem(index)"
+          />
+        </div>
+
+        <FormKit
+          v-if="modelValue"
+          :id="`__validate__${name}__${index}`"
+          v-model="modelValue[index]"
+          :name="`__validate__${name}__${index}`"
+          type="group"
+        >
+          <FormKitSchema
+            :schema="childrenSchema"
+            :data="modelValue[index]"
+          />
+        </FormKit>
+      </div>
+    </div>
+
+    <Button
+      type="button"
+      :label="addLabel || 'Add Item'"
+      icon="pi pi-plus"
+      size="small"
+      class="mt-3"
+      :disabled="isAddDisabled"
+      @click.prevent.stop="addItem"
+    />
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormKitSchemaNode } from '@formkit/core'
+
+const props = defineProps<{
+  name: string
+  label?: string
+  addLabel?: string
+  childrenSchema: FormKitSchemaNode[]
+  min?: number
+  max?: number
+}>()
+
+const modelValue = defineModel<Record<string, unknown>[]>({ default: () => [] })
+
+const items = computed(() => modelValue.value || [])
+
+const isAddDisabled = computed(() => {
+  if (typeof props.max !== 'number') return false
+  return items.value.length >= props.max
+})
+
+const isRemoveDisabled = computed(() => {
+  const minVal = typeof props.min === 'number' ? props.min : 0
+  return items.value.length <= minVal
+})
+
+function addItem() {
+  if (isAddDisabled.value) return
+  if (!modelValue.value) {
+    modelValue.value = []
+  }
+  modelValue.value.push({})
+}
+
+function removeItem(index: number) {
+  if (!modelValue.value || isRemoveDisabled.value) return
+  modelValue.value = modelValue.value.filter((_, i) => i !== index)
+}
+</script>

package/components/FormKit/VectorStoreInput.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Database Selection -->
+    <div>
+      <label
+        for="vector-store-database-select"
+        class="mb-1 block text-sm font-medium"
+      >
+        {{ t('lib.vectorStore.database.label') }}
+      </label>
+      <Select
+        v-model="selectedDatabase"
+        input-id="vector-store-database-select"
+        :options="databaseOptions"
+        option-label="displayName"
+        option-value="name"
+        :placeholder="databasePlaceholder ?? t('common.selectDatabase')"
+        :filter="filter"
+        :loading="isLoading"
+        class="w-full"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <Icon
+              name="mage:database"
+              size="1.2em"
+            />
+            <span>{{ option.displayName }}</span>
+          </div>
+        </template>
+        <template #value="{ value }">
+          <div
+            v-if="value"
+            class="flex items-center gap-2"
+          >
+            <Icon
+              name="mage:database"
+              size="1.2em"
+            />
+            <span>{{ getDatabaseDisplayName(value) }}</span>
+          </div>
+        </template>
+      </Select>
+    </div>
+
+    <!-- Namespace Selection (shown when database selected) -->
+    <div v-if="selectedDatabase">
+      <label
+        for="vector-store-namespaces-select"
+        class="mb-1 block text-sm font-medium"
+      >
+        {{ t('lib.vectorStore.namespaces.label') }}
+      </label>
+      <MultiSelect
+        v-model="selectedNamespaces"
+        input-id="vector-store-namespaces-select"
+        :options="namespaceOptions"
+        option-label="displayName"
+        option-value="name"
+        :placeholder="namespacePlaceholder ?? t('lib.vectorStore.namespaces.placeholder')"
+        :filter="filter"
+        display="chip"
+        class="w-full"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <Icon
+              name="mage:folder"
+              size="1.2em"
+            />
+            <span>{{ option.displayName }}</span>
+          </div>
+        </template>
+      </MultiSelect>
+      <small class="mt-1 text-surface-500">
+        {{ t('lib.vectorStore.namespaces.help') }}
+      </small>
+    </div>
+
+    <!-- Allowed metadata filter fields (shown when database selected) -->
+    <div v-if="selectedDatabase">
+      <label
+        for="vector-store-filter-fields-input"
+        class="mb-1 block text-sm font-medium"
+      >
+        {{ t('lib.vectorStore.allowedFilterFields.label') }}
+      </label>
+      <ChipsInput :context="chipsInputContext" />
+      <small class="mt-1 text-surface-500">
+        {{ t('lib.vectorStore.allowedFilterFields.help') }}
+      </small>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChipsInput from '@core/components/FormKit/ChipsInput.vue'
+import { getDatabases } from '@core/sdk/client'
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { DatabaseDto } from '@core/sdk/client'
+
+interface VectorStoreInputValue {
+  collection_name: string
+  index_namespaces: string[]
+  allowed_metadata_filter_fields: string[]
+}
+
+interface DatabaseOption {
+  name: string
+  displayName: string
+}
+
+interface NamespaceOption {
+  name: string
+  displayName: string
+}
+
+interface VectorStoreInputProps {
+  context: {
+    node: {
+      input: (value: VectorStoreInputValue | null) => void
+    }
+    value?: VectorStoreInputValue | null
+    attrs: Record<string, unknown>
+    databasePlaceholder?: string
+    namespacePlaceholder?: string
+    allowedFilterFieldsPlaceholder?: string
+    filter?: boolean
+  }
+}
+
+const props = defineProps<VectorStoreInputProps>()
+const { t } = useI18n()
+const { tenantId } = useTenant()
+
+// Get custom props from context (FormKit passes them there, not as direct props)
+const databasePlaceholder = computed(() => props.context.databasePlaceholder)
+const namespacePlaceholder = computed(() => props.context.namespacePlaceholder)
+const allowedFilterFieldsPlaceholder = computed(() => props.context.allowedFilterFieldsPlaceholder)
+const filter = computed(() => props.context.filter ?? true)
+
+// State
+const databases = ref<DatabaseDto[]>([])
+const isLoading = ref(false)
+
+// Get current value from context
+const currentValue = computed(() => props.context.value ?? null)
+
+// Selected database (computed property that syncs with the form value)
+const selectedDatabase = computed({
+  get: () => currentValue.value?.collection_name ?? null,
+  set: (value: string | null) => {
+    if (value) {
+      // When database changes, reset namespaces and allowed filter fields
+      emitValue(value, [], [])
+    }
+    else {
+      props.context.node.input(null)
+    }
+  },
+})
+
+// Selected namespaces (computed property that syncs with the form value)
+const selectedNamespaces = computed({
+  get: () => currentValue.value?.index_namespaces ?? [],
+  set: (value: string[]) => {
+    if (selectedDatabase.value) {
+      emitValue(selectedDatabase.value, value, allowedFilterFields.value)
+    }
+  },
+})
+
+// Allowed metadata filter fields (delegated to ChipsInput child component)
+const allowedFilterFields = computed(() => currentValue.value?.allowed_metadata_filter_fields ?? [])
+
+const chipsInputContext = computed(() => ({
+  node: {
+    input: (value: string[]) => {
+      if (selectedDatabase.value) {
+        emitValue(selectedDatabase.value, selectedNamespaces.value, value)
+      }
+    },
+  },
+  value: allowedFilterFields.value,
+  placeholder: allowedFilterFieldsPlaceholder.value ?? t('lib.vectorStore.allowedFilterFields.placeholder'),
+  inputId: 'vector-store-filter-fields-input',
+}))
+
+// Emit complete value object
+function emitValue(collectionName: string, namespaces: string[], allowedFilterFieldKeys: string[]) {
+  props.context.node.input({
+    collection_name: collectionName,
+    index_namespaces: namespaces,
+    allowed_metadata_filter_fields: allowedFilterFieldKeys,
+  })
+}
+
+// Database options for select
+const databaseOptions = computed<DatabaseOption[]>(() =>
+  databases.value.map(db => ({
+    name: db.name,
+    displayName: db.display_name || useChangeCase(db.name, 'capitalCase'),
+  })),
+)
+
+// Namespace options based on selected database
+const namespaceOptions = computed<NamespaceOption[]>(() => {
+  if (!selectedDatabase.value)
+    return []
+  const db = databases.value.find(d => d.name === selectedDatabase.value)
+  if (!db)
+    return []
+  return db.namespaces.map(ns => ({
+    name: ns.name,
+    displayName: ns.display_name || useChangeCase(ns.name, 'capitalCase'),
+  }))
+})
+
+function getDatabaseDisplayName(name: string): string {
+  const option = databaseOptions.value.find(opt => opt.name === name)
+  return option?.displayName ?? name
+}
+
+async function fetchDatabases() {
+  isLoading.value = true
+  try {
+    const response = await getDatabases({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value! },
+    })
+    databases.value = response
+  }
+  catch (error) {
+    console.error('Failed to fetch databases:', error)
+    databases.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+// Fetch databases on mount
+onMounted(() => {
+  fetchDatabases()
+})
+</script>