@swiss-ai-hub/web 0.321.1 → 0.323.0

package/components/FormKit/KnowledgeDatabaseSelector.vue

@@ -11,6 +11,13 @@
       class="w-full"
       :loading="isLoading"
     >
+      <!-- PrimeVue 4.5 renders the chip-mode placeholder twice while loading with no options yet. -->
+      <template
+        v-if="selectedDatabases.length === 0"
+        #value="{ placeholder: emptyLabel }"
+      >
+        {{ emptyLabel }}
+      </template>
       <template #option="{ option }">
         <div class="flex items-center gap-2">
           <Icon

package/components/FormKit/LocaleInput.vue

@@ -78,6 +78,7 @@ interface LocaleInputProps {
     inputType?: 'text' | 'textarea'
     rows?: number
     placeholder?: LocaleStringDto
+    allowTranslation?: boolean
   }
 }
 
@@ -140,6 +141,7 @@ function hasValue(lang: Locale): boolean {
 
 // Check if translation is possible (current locale has text and at least one other locale is empty)
 const canTranslate = computed(() => {
+  if (props.context.allowTranslation === false) return false
   const currentText = localeValue.value[activeLocale.value]
   if (!currentText) return false
 

package/components/FormKit/SecretFileInput.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      :aria-label="context.label"
+      :accept="accept"
+      @change="onFileChosen"
+    >
+
+    <button
+      v-if="state === 'empty'"
+      :id="context.id"
+      type="button"
+      class="flex w-full cursor-pointer items-center gap-3 rounded-lg border-2 border-dashed border-surface-300 p-4 text-left transition-colors hover:border-primary-500 hover:bg-surface-50 dark:border-surface-600 dark:hover:bg-surface-800"
+      :class="{ 'border-primary-500 bg-surface-50 dark:bg-surface-800': isDragOver }"
+      @click="chooseFile"
+      @dragover.prevent="isDragOver = true"
+      @dragleave.prevent="isDragOver = false"
+      @drop.prevent="onFileDropped"
+    >
+      <i class="pi pi-upload text-surface-400" />
+      <span class="flex flex-col">
+        <span class="text-sm font-semibold text-surface-700 dark:text-surface-200">
+          {{ context.placeholder ?? t('form.secret_file_input.drop_hint') }}
+        </span>
+        <span class="text-xs text-surface-500 dark:text-surface-400">
+          {{ t('form.secret_file_input.limits', { accept: accept ?? '*', size: maxSizeLabel }) }}
+        </span>
+      </span>
+    </button>
+
+    <div
+      v-else
+      class="flex items-center justify-between gap-3 rounded-lg border border-surface-200 bg-surface-50 p-3 dark:border-surface-700 dark:bg-surface-800"
+    >
+      <div class="flex min-w-0 items-center gap-3">
+        <i
+          class="pi text-surface-400"
+          :class="state === 'stored' ? 'pi-lock' : 'pi-file'"
+        />
+        <div class="flex min-w-0 flex-col">
+          <span class="truncate text-sm font-medium text-surface-800 dark:text-surface-100">
+            {{ state === 'stored' ? t('form.secret_file_input.stored') : (fileName ?? t('form.secret_file_input.selected')) }}
+          </span>
+          <span
+            v-if="state === 'selected' && clientEmail"
+            class="truncate text-xs text-surface-500 dark:text-surface-400"
+          >
+            {{ t('form.secret_file_input.client_email', { email: clientEmail }) }}
+          </span>
+        </div>
+      </div>
+      <div class="flex shrink-0 items-center gap-1">
+        <Button
+          :id="context.id"
+          :label="t('form.secret_file_input.replace')"
+          icon="pi pi-refresh"
+          size="small"
+          severity="secondary"
+          text
+          @click="chooseFile"
+        />
+        <Button
+          v-tooltip.top="t('form.secret_file_input.remove')"
+          :aria-label="t('form.secret_file_input.remove')"
+          icon="pi pi-trash"
+          size="small"
+          severity="secondary"
+          text
+          rounded
+          @click="removeFile"
+        />
+      </div>
+    </div>
+
+    <Message
+      v-if="errorMessage"
+      severity="error"
+      size="small"
+      variant="simple"
+    >
+      {{ errorMessage }}
+    </Message>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface SecretFileInputProps {
+  context: {
+    id: string
+    label?: string
+    node: { input: (value: string) => void }
+    value?: string | null
+    accept?: string
+    maxSizeBytes?: number
+    placeholder?: string
+  }
+}
+
+// The API returns a stored secret as this mask followed by a handle, never the secret itself
+// (SecretEncryptionService in packages/core); resubmitting it untouched keeps the stored value.
+const STORED_SECRET_MASK = '••••••••'
+const DEFAULT_MAX_SIZE_BYTES = 65536
+
+const props = defineProps<SecretFileInputProps>()
+const { t } = useI18n()
+
+const fileInput = ref<HTMLInputElement>()
+const isDragOver = ref(false)
+const fileName = ref<string | null>(null)
+const clientEmail = ref<string | null>(null)
+const errorMessage = ref<string | null>(null)
+
+const accept = computed(() => props.context.accept)
+const maxSizeBytes = computed(() => props.context.maxSizeBytes ?? DEFAULT_MAX_SIZE_BYTES)
+const maxSizeLabel = computed(() => `${Math.round(maxSizeBytes.value / 1024)} KB`)
+const expectsJson = computed(() => accept.value?.includes('.json') ?? false)
+
+const state = computed<'empty' | 'stored' | 'selected'>(() => {
+  const value = props.context.value
+  if (!value) return 'empty'
+  return value.startsWith(STORED_SECRET_MASK) ? 'stored' : 'selected'
+})
+
+function chooseFile() {
+  fileInput.value?.click()
+}
+
+async function onFileChosen(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  // Cleared so picking the same file again after a failed attempt still fires `change`.
+  input.value = ''
+  if (file) await acceptFile(file)
+}
+
+async function onFileDropped(event: DragEvent) {
+  isDragOver.value = false
+  const file = event.dataTransfer?.files?.[0]
+  if (file) await acceptFile(file)
+}
+
+async function acceptFile(file: File) {
+  errorMessage.value = null
+  if (file.size > maxSizeBytes.value) {
+    errorMessage.value = t('form.secret_file_input.too_large', { size: maxSizeLabel.value })
+    return
+  }
+  const contents = await file.text()
+  let parsed: unknown = null
+  if (expectsJson.value) {
+    try {
+      parsed = JSON.parse(contents)
+    }
+    catch {
+      errorMessage.value = t('form.secret_file_input.invalid_json')
+      return
+    }
+  }
+  fileName.value = file.name
+  clientEmail.value = readClientEmail(parsed)
+  props.context.node.input(contents)
+}
+
+// A Google service-account key names the account the Drive folder has to be shared with; showing it
+// lets the admin confirm the right key was picked without ever rendering the private key.
+function readClientEmail(parsed: unknown): string | null {
+  if (!parsed || typeof parsed !== 'object') return null
+  const email = (parsed as Record<string, unknown>).client_email
+  return typeof email === 'string' ? email : null
+}
+
+function removeFile() {
+  fileName.value = null
+  clientEmail.value = null
+  errorMessage.value = null
+  props.context.node.input('')
+}
+</script>

package/components/FormKit/VectorStoreInput.vue

@@ -80,6 +80,9 @@
         option-value="name"
         :placeholder="namespacePlaceholder ?? t('lib.vectorStore.namespaces.placeholder')"
         :filter="filter"
+        :invalid="namespaceScopeIsEmpty"
+        :aria-invalid="namespaceScopeIsEmpty"
+        aria-describedby="vector-store-namespaces-hint"
         display="chip"
         class="w-full"
       >
@@ -93,7 +96,18 @@
           </div>
         </template>
       </MultiSelect>
-      <small class="mt-1 text-surface-500">
+      <small
+        v-if="namespaceScopeIsEmpty"
+        id="vector-store-namespaces-hint"
+        class="mt-1 block text-red-500"
+      >
+        {{ t('lib.vectorStore.namespaces.required') }}
+      </small>
+      <small
+        v-else
+        id="vector-store-namespaces-hint"
+        class="mt-1 text-surface-500"
+      >
         {{ t('lib.vectorStore.namespaces.help') }}
       </small>
     </div>
@@ -203,6 +217,11 @@ const selectedNamespaces = computed({
   },
 })
 
+// The API refuses this scope on save and a run would abort on it, so it is flagged while the admin edits
+const namespaceScopeIsEmpty = computed(() =>
+  Boolean(selectedDatabase.value) && !allNamespaces.value && selectedNamespaces.value.length === 0,
+)
+
 // Allowed metadata filter fields (delegated to ChipsInput child component)
 const allowedFilterFields = computed(() => currentValue.value?.allowed_metadata_filter_fields ?? [])
 

package/components/Knowledge/Database/CreateModal.vue

@@ -70,6 +70,28 @@
           </small>
         </div>
 
+        <div class="flex flex-col gap-2">
+          <label
+            for="database-source-select"
+            class="text-sm font-medium"
+          >
+            {{ t('knowledge.form.source.label') }}
+          </label>
+          <Select
+            id="database-source-select"
+            v-model="selectedSource"
+            :options="sourceOptions"
+            option-label="display_name"
+            option-value="name"
+            :placeholder="t('knowledge.form.source.placeholder')"
+            :disabled="isSubmitting"
+            class="w-full"
+          />
+          <small class="text-gray-500">
+            {{ selectedSourceData?.description || t('knowledge.form.source.help') }}
+          </small>
+        </div>
+
         <div
           v-if="selectedClassData && configForm.length > 0 && formReady"
           class="content flex flex-col gap-2"
@@ -140,6 +162,20 @@
                   </div>
                 </StepPanel>
               </StepItem>
+              <StepItem
+                v-if="selectedSourceData && sourceSchema.length > 0"
+                :value="sourceStepIndex"
+              >
+                <Step>{{ t('knowledge.form.create_database.steps.source') }}</Step>
+                <StepPanel>
+                  <div class="content flex flex-col gap-6 py-4">
+                    <FormKitSchema
+                      :schema="sourceSchema"
+                      :data="formData"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
             </Stepper>
           </FormKit>
         </div>
@@ -164,9 +200,20 @@
 </template>
 
 <script setup lang="ts">
-import { type FormElement, serializeFormData } from '@core/composables/form/useFormKitTransform'
+import {
+  buildFormKitSchema,
+  type FormElement,
+  hydrateFormData,
+  serializeFormData,
+} from '@core/composables/form/useFormKitTransform'
 import { getNode } from '@formkit/core'
 
+import type { SourcePipelineDto } from '@core/sdk/client'
+import type { FormKitSchemaNode } from '@formkit/core'
+
+// Manual upload is the absence of a source; it is offered as a first, form-less entry of the source list.
+const MANUAL_UPLOAD = '__manual_upload__'
+
 const props = defineProps<{
   modelValue: boolean
 }>()
@@ -180,6 +227,7 @@ const { t, locale } = useI18n()
 const toast = useToast()
 const { mutateAsync: createDatabase } = useCreateDatabase()
 const { ingestors, ingestorsAreLoading } = useIngestors()
+const { sourcePipelines } = useSourcePipelines()
 const { tenantId } = useTenant()
 
 // The ingestor list is the "class" list: each ingestor announces the form its databases are configured
@@ -206,6 +254,41 @@ const {
   locale,
 })
 
+// The source is a second axis of the database: its form is announced by the source pipeline exactly like the
+// ingestor's, and rendered as one more step of the same form under the `source_configuration` group, so a single
+// submit carries both.
+const selectedSource = ref<string>(MANUAL_UPLOAD)
+const sourceOptions = computed<Array<Pick<SourcePipelineDto, 'name' | 'display_name' | 'description'>>>(() => [
+  {
+    name: MANUAL_UPLOAD,
+    display_name: t('knowledge.form.source.manual_upload.label'),
+    description: t('knowledge.form.source.manual_upload.description'),
+  },
+  ...(sourcePipelines.value ?? []),
+])
+const selectedSourceData = computed<SourcePipelineDto | undefined>(() =>
+  sourcePipelines.value?.find(source => source.name === selectedSource.value),
+)
+const sourceForm = computed<FormElement[]>(() => (selectedSourceData.value?.form ?? []) as FormElement[])
+const sourceSchema = computed<FormKitSchemaNode[]>(() => {
+  if (sourceForm.value.length === 0) return []
+  return [{
+    $formkit: 'group',
+    name: 'source_configuration',
+    children: buildFormKitSchema(sourceForm.value, { locale: locale.value }),
+  }]
+})
+const sourceStepIndex = computed(
+  () => (simpleElementsSchema.value.length > 0 ? 1 : 0) + groupConfigs.value.length + repeaterConfigs.value.length,
+)
+
+watch(selectedSource, () => {
+  formData.value = {
+    ...formData.value,
+    source_configuration: sourceForm.value.length > 0 ? hydrateFormData({}, sourceForm.value) : undefined,
+  }
+})
+
 const databaseName = ref('')
 const isSubmitting = ref(false)
 const formReady = ref(false)
@@ -219,6 +302,7 @@ watch(visible, async (isVisible) => {
   if (!isVisible) {
     formReady.value = false
     databaseName.value = ''
+    selectedSource.value = MANUAL_UPLOAD
     resetForm()
     return
   }
@@ -258,13 +342,18 @@ function triggerFormSubmit() {
 
 async function handleFormSubmit() {
   const database = databaseName.value
+  const { source_configuration, ...ingestorData } = formData.value
   try {
     await createDatabase({
       database,
       tenantId: tenantId.value!,
       request: {
         ingestor: selectedClass.value,
-        configuration: serializeFormData(formData.value, configForm.value as FormElement[]),
+        configuration: serializeFormData(ingestorData, configForm.value as FormElement[]),
+        source: selectedSourceData.value?.name ?? null,
+        source_configuration: selectedSourceData.value
+          ? serializeFormData((source_configuration ?? {}) as Record<string, unknown>, sourceForm.value)
+          : {},
       },
     })
 

package/components/Knowledge/Database/SourceModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('knowledge.form.edit_source.title', { name: database?.display_name || database?.name })"
+    :style="{ width: '50rem' }"
+    :closable="!isSubmitting"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <label
+          for="database-source-edit-select"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.source.label') }}
+        </label>
+        <Select
+          id="database-source-edit-select"
+          v-model="selectedSource"
+          :options="sourceOptions"
+          option-label="display_name"
+          option-value="name"
+          :disabled="isSubmitting"
+          class="w-full"
+        />
+        <small class="text-gray-500">
+          {{ selectedSourceData?.description || t('knowledge.form.source.manual_upload.description') }}
+        </small>
+      </div>
+
+      <!-- Keyed on the source so switching re-seeds the form: the stored configuration only applies to the
+           source it was written for, and its secrets arrive masked and stay masked unless replaced. -->
+      <FormKitDynamicConfiguration
+        v-if="selectedSourceData"
+        :key="selectedSourceData.name"
+        :form="selectedSourceData.form"
+        :initial-data="initialConfiguration"
+        @submit="confirmHandoverThenSubmit"
+      />
+      <Button
+        v-else
+        :label="t('knowledge.form.edit_source.switch_to_manual')"
+        :loading="isSubmitting"
+        :disabled="database?.source === null"
+        class="w-full"
+        @click="submitSource(null)"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { DatabaseDto, SourcePipelineDto } from '@core/sdk/client'
+
+const MANUAL_UPLOAD = '__manual_upload__'
+
+const props = defineProps<{
+  modelValue: boolean
+  database: DatabaseDto | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const confirm = useConfirm()
+const { tenantId } = useTenant()
+const { sourcePipelines } = useSourcePipelines()
+const { mutateAsync: updateDatabaseSource } = useUpdateDatabaseSource()
+
+const isSubmitting = ref(false)
+const selectedSource = ref<string>(MANUAL_UPLOAD)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+const sourceOptions = computed<Array<Pick<SourcePipelineDto, 'name' | 'display_name' | 'description'>>>(() => [
+  {
+    name: MANUAL_UPLOAD,
+    display_name: t('knowledge.form.source.manual_upload.label'),
+    description: t('knowledge.form.source.manual_upload.description'),
+  },
+  ...(sourcePipelines.value ?? []),
+])
+const selectedSourceData = computed<SourcePipelineDto | undefined>(() =>
+  sourcePipelines.value?.find(source => source.name === selectedSource.value),
+)
+
+// The stored configuration is only meaningful for the source it belongs to; another source starts blank.
+const initialConfiguration = computed<Record<string, unknown>>(() =>
+  props.database?.source === selectedSource.value
+    ? (props.database?.source_configuration ?? {}) as Record<string, unknown>
+    : {},
+)
+
+watch(visible, (isVisible) => {
+  if (!isVisible) return
+  selectedSource.value = props.database?.source ?? MANUAL_UPLOAD
+})
+
+// A source owns its database's content: on the next sync it removes every file it does not have. Handing a
+// manually filled database over is therefore confirmed first, and the API refuses it without the acknowledgement.
+const existingDocuments = computed(() =>
+  (props.database?.namespaces ?? []).reduce((total, namespace) => total + namespace.number_of_documents, 0),
+)
+const isHandoverFromManualUpload = computed(() => props.database?.source === null && existingDocuments.value > 0)
+
+function confirmHandoverThenSubmit(configuration: Record<string, unknown>) {
+  if (!isHandoverFromManualUpload.value) {
+    submitSource(configuration)
+    return
+  }
+  confirm.require({
+    header: t('knowledge.form.edit_source.replace_documents.header'),
+    message: t('knowledge.form.edit_source.replace_documents.message', {
+      name: props.database?.display_name || props.database?.name,
+      count: existingDocuments.value,
+    }),
+    icon: 'pi pi-exclamation-triangle',
+    rejectLabel: t('common.actions.cancel'),
+    acceptLabel: t('knowledge.form.edit_source.replace_documents.accept'),
+    acceptClass: 'p-button-danger',
+    accept: () => submitSource(configuration, { replaceExistingDocuments: true }),
+  })
+}
+
+async function submitSource(
+  configuration: Record<string, unknown> | null,
+  options: { replaceExistingDocuments?: boolean } = {},
+) {
+  if (!props.database) return
+  isSubmitting.value = true
+  try {
+    await updateDatabaseSource({
+      database: props.database.name,
+      tenantId: tenantId.value!,
+      request: configuration === null
+        ? { source: null, source_configuration: {} }
+        : {
+            source: selectedSourceData.value?.name ?? null,
+            source_configuration: configuration,
+            replace_existing_documents: options.replaceExistingDocuments ?? false,
+          },
+    })
+    toast.add({ severity: 'success', summary: t('knowledge.form.edit_source.success'), life: 3000 })
+    visible.value = false
+  }
+  catch (error) {
+    console.error('Failed to update the knowledge database source:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('knowledge.form.edit_source.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+  finally {
+    isSubmitting.value = false
+  }
+}
+</script>

package/components/Knowledge/Document/UploadModal.vue

@@ -164,6 +164,7 @@ const emit = defineEmits<{
 const { uploadFile } = useFileUpload()
 const { supportedFileTypes } = useSupportedFileTypes()
 const { tenantId } = useTenant()
+const queryCache = useQueryCache()
 
 const acceptedFileTypesString = computed(() => {
   return (supportedFileTypes.value ?? []).join(', ')
@@ -276,6 +277,9 @@ const handleUpload = async () => {
     })
   }
 
+  // Invalidated here rather than by the caller: uploading from the knowledge overview into the namespace that is
+  // already open navigates nowhere, so no page would otherwise refetch its list.
+  queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'knowledge', 'databases', database, 'namespaces', namespace, 'documents'] })
   emit('success', { files: selectedFiles.value, namespace, database })
   closeModal()
 }

package/components/Knowledge/Namespace/Card.vue

@@ -36,7 +36,7 @@
           @click.stop="handleEditClick"
         />
         <Button
-          v-if="!autoSync"
+          v-if="!sourced"
           v-tooltip.top="t('knowledge.upload_documents')"
           icon="pi pi-upload"
           rounded
@@ -46,7 +46,7 @@
           @click.stop="handleUploadClick"
         />
         <Button
-          v-if="!autoSync"
+          v-if="!sourced"
           v-tooltip.top="t('knowledge.delete_namespace')"
           icon="pi pi-trash"
           rounded
@@ -78,10 +78,10 @@ import { capitalCase } from 'change-case'
 import type { NamespaceDto } from '@core/sdk/client'
 
 // Not gated on the database's `deletable`: a legacy database cannot be removed as a whole, but its
-// namespaces can. Only an auto-synced source, which would just re-sync them, blocks both affordances.
+// namespaces can. Only a sourced database, whose source would just re-sync them, blocks both affordances.
 const props = defineProps<{
   namespace: NamespaceDto
-  autoSync?: boolean
+  sourced?: boolean
 }>()
 
 const emit = defineEmits<{

package/components/Knowledge/Namespace/CreateModal.vue

@@ -143,7 +143,7 @@ const isCreating = ref(false)
 
 const databaseOptions = computed(() =>
   (props.databases || [])
-    .filter(db => !db.auto_sync)
+    .filter(db => !db.source)
     .map(db => ({
       name: db.name,
       displayName: capitalCase(db.name),

package/components/Knowledge/Namespace/EditModal.vue

@@ -81,6 +81,7 @@ import { useI18n } from '#i18n'
 
 const props = defineProps<{
   modelValue: boolean
+  database: string
   namespace: NamespaceDto | null
 }>()
 
@@ -106,16 +107,14 @@ const handleSave = async () => {
 
   error.value = ''
 
-  const namespaceId = props.namespace.id
-  const databaseId = props.namespace.database_id
   const updatePayload: UpdateNamespaceRequest = {
     display_name: displayName.value || props.namespace.name,
     description: description.value || null,
   }
 
   await updateNamespace({
-    namespace: namespaceId,
-    database: databaseId,
+    namespace: props.namespace.name,
+    database: props.database,
     payload: ref(updatePayload),
     tenantId: tenantId.value!,
   })

package/components/Role/AccessRulesEditor.vue

@@ -96,7 +96,7 @@
           :placeholder="t('role.add_access_role')"
           size="small"
           class="flex-1"
-          @keyup.enter="add"
+          @keydown.enter.prevent="add"
         />
         <Button
           type="button"

package/components/Service/Selection.vue

@@ -52,6 +52,12 @@
           height="5rem"
         />
       </template>
+      <div
+        v-else-if="appsError"
+        class="col-span-4 py-4 text-center text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('http_error.code.503') }}
+      </div>
       <template
         v-else
       >
@@ -104,7 +110,7 @@ const router = useRouter()
 const route = useRoute()
 const tenantPath = useTenantPath()
 
-const { apps, appsLoading } = useApps()
+const { apps, appsLoading, appsError } = useApps()
 const { t } = useI18n()
 
 const shownApps = computed(() => {