@swiss-ai-hub/web 0.319.0 → 0.321.0

package/components/Knowledge/Database/CreateModal.vue

@@ -0,0 +1,315 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('knowledge.form.create_database.title')"
+    :style="{ width: '50rem' }"
+    :closable="!isSubmitting"
+  >
+    <div class="flex flex-col gap-6">
+      <div
+        v-if="ingestorsAreLoading"
+        class="flex items-center justify-center py-8"
+      >
+        <ProgressSpinner />
+      </div>
+
+      <div
+        v-else-if="!ingestors || ingestors.length === 0"
+        class="py-8 text-center text-surface-500"
+      >
+        {{ t('knowledge.form.create_database.no_ingestors') }}
+      </div>
+
+      <template v-else>
+        <div class="flex flex-col gap-2">
+          <label
+            for="database-name-input"
+            class="text-sm font-medium"
+          >
+            {{ t('knowledge.form.database_name.label') }}
+            <span class="ml-1 text-xs text-red-500">*</span>
+          </label>
+          <InputText
+            id="database-name-input"
+            v-model="databaseName"
+            :placeholder="t('knowledge.form.database_name.placeholder')"
+            :class="{ 'p-invalid': nameValidationError }"
+            :disabled="isSubmitting"
+          />
+          <small
+            v-if="nameValidationError"
+            class="text-red-500"
+          >{{ nameValidationError }}</small>
+          <small
+            v-else
+            class="text-gray-500"
+          >{{ t('knowledge.form.database_name.help') }}</small>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label
+            for="database-ingestor-select"
+            class="text-sm font-medium"
+          >
+            {{ t('knowledge.form.ingestor.label') }}
+            <span class="ml-1 text-xs text-red-500">*</span>
+          </label>
+          <Select
+            id="database-ingestor-select"
+            v-model="selectedClass"
+            :options="ingestors"
+            option-label="display_name"
+            option-value="name"
+            :placeholder="t('knowledge.form.ingestor.placeholder')"
+            :disabled="isSubmitting"
+            class="w-full"
+          />
+          <small class="text-gray-500">
+            {{ selectedClassData?.description || t('knowledge.form.ingestor.help') }}
+          </small>
+        </div>
+
+        <div
+          v-if="selectedClassData && configForm.length > 0 && formReady"
+          class="content flex flex-col gap-2"
+        >
+          <FormKit
+            id="create-database-form"
+            v-model="formData"
+            type="form"
+            :actions="false"
+            :config="{
+              validationVisibility: 'dirty',
+            }"
+            @submit="handleFormSubmit"
+            @submit-invalid="isSubmitting = false"
+          >
+            <Stepper
+              v-model:value="activeStep"
+              orientation="vertical"
+            >
+              <StepItem
+                v-if="simpleElementsSchema.length > 0"
+                :value="0"
+              >
+                <Step>{{ t('knowledge.form.create_database.steps.basic_info') }}</Step>
+                <StepPanel>
+                  <div class="flex flex-col gap-6 py-4">
+                    <FormKitSchema
+                      :schema="simpleElementsSchema"
+                      :data="formData"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+              <StepItem
+                v-for="(group, index) in groupConfigs"
+                :key="`group-${group.name}`"
+                :value="getGroupStepIndex(index)"
+              >
+                <Step>{{ group.label || group.name }}</Step>
+                <StepPanel>
+                  <div class="content py-4">
+                    <FormKitSchema
+                      :schema="group.schema"
+                      :data="formData"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+              <StepItem
+                v-for="(rep, index) in repeaterConfigs"
+                :key="`repeater-${rep.path}`"
+                :value="getRepeaterStepIndex(index)"
+              >
+                <Step>{{ rep.label || rep.name }}</Step>
+                <StepPanel>
+                  <div class="py-4">
+                    <FormKitRepeater
+                      :model-value="getRepeaterData(rep.path)"
+                      :name="rep.name"
+                      :label="rep.label"
+                      :add-label="rep.addLabel"
+                      :children-schema="rep.childrenSchema"
+                      :default-item="rep.defaultItem"
+                      :min="rep.min"
+                      :max="rep.max"
+                      @update:model-value="setRepeaterData(rep.path, $event)"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+            </Stepper>
+          </FormKit>
+        </div>
+      </template>
+    </div>
+
+    <template #footer>
+      <Button
+        :label="t('knowledge.actions.cancel')"
+        severity="secondary"
+        outlined
+        @click="closeModal"
+      />
+      <Button
+        :label="t('knowledge.actions.create')"
+        :disabled="!canSubmit"
+        :loading="isSubmitting"
+        @click="triggerFormSubmit"
+      />
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { type FormElement, serializeFormData } from '@core/composables/form/useFormKitTransform'
+import { getNode } from '@formkit/core'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'success': [data: { database: string }]
+}>()
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const { mutateAsync: createDatabase } = useCreateDatabase()
+const { ingestors, ingestorsAreLoading } = useIngestors()
+const { tenantId } = useTenant()
+
+// The ingestor list is the "class" list: each ingestor announces the form its databases are configured
+// through, exactly as an agent class does, so the agent create flow is reused as is.
+const {
+  selectedClass,
+  formData,
+  activeStep,
+  selectedClassData,
+  configForm,
+  simpleElementsSchema,
+  groupConfigs,
+  repeaterConfigs,
+  getGroupStepIndex,
+  getRepeaterStepIndex,
+  getRepeaterData,
+  setRepeaterData,
+  resetForm,
+} = useCreateInstanceForm({
+  classes: ingestors,
+  classField: 'name',
+  idField: 'name',
+  initialClass: () => ingestors.value?.[0]?.name ?? '',
+  locale,
+})
+
+const databaseName = ref('')
+const isSubmitting = ref(false)
+const formReady = ref(false)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+watch(visible, async (isVisible) => {
+  if (!isVisible) {
+    formReady.value = false
+    databaseName.value = ''
+    resetForm()
+    return
+  }
+  await nextTick()
+  formReady.value = true
+})
+
+const nameValidationError = computed(() => {
+  if (!databaseName.value.trim()) return ''
+
+  const namePattern = /^[a-z][a-z0-9]{2,62}$/
+  if (!namePattern.test(databaseName.value)) {
+    return t('knowledge.form.database_name.validation_error')
+  }
+  return ''
+})
+
+const canSubmit = computed(
+  () => databaseName.value.trim() && selectedClass.value && !nameValidationError.value && !isSubmitting.value,
+)
+
+function closeModal() {
+  visible.value = false
+}
+
+function triggerFormSubmit() {
+  if (!canSubmit.value) return
+  isSubmitting.value = true
+  const formNode = getNode('create-database-form')
+  if (formNode) {
+    formNode.submit()
+  }
+  else {
+    handleFormSubmit()
+  }
+}
+
+async function handleFormSubmit() {
+  const database = databaseName.value
+  try {
+    await createDatabase({
+      database,
+      tenantId: tenantId.value!,
+      request: {
+        ingestor: selectedClass.value,
+        configuration: serializeFormData(formData.value, configForm.value as FormElement[]),
+      },
+    })
+
+    toast.add({
+      severity: 'success',
+      summary: t('knowledge.form.create_database.success'),
+      life: 3000,
+    })
+
+    emit('success', { database })
+    closeModal()
+  }
+  catch (error) {
+    console.error('Failed to create knowledge database:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('knowledge.form.create_database.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+  finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  @apply font-light text-xs
+}
+
+.content :deep(.formkit-group-fieldset) {
+  @apply flex flex-col gap-6;
+}
+
+.content :deep(.formkit-outer) {
+  @apply pt-3 pb-1;
+}
+
+.content :deep(.formkit-group-fieldset legend) {
+  @apply hidden;
+}
+
+.content :deep(#create-database-form-incomplete) {
+  @apply font-bold text-sm text-right pr-2;
+}
+</style>

package/components/Knowledge/Database/EmptyCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    type="button"
+    class="flex w-full cursor-pointer items-center gap-3 rounded-xl border-2 border-dashed border-surface-300 p-4 text-left hover:border-primary-500 hover:bg-surface-50 dark:border-surface-600 dark:hover:bg-surface-800"
+    @click="handleAdd"
+  >
+    <div class="flex items-center justify-center p-2">
+      <i
+        class="pi pi-database text-surface-400"
+        style="font-size: 1.5rem"
+      />
+    </div>
+    <div>
+      <h3 class="font-medium text-surface-600 dark:text-surface-400">
+        {{ t('knowledge.add_database.title') }}
+      </h3>
+      <p class="text-sm text-surface-500 dark:text-surface-400">
+        {{ t('knowledge.add_database.description') }}
+      </p>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  add: []
+}>()
+
+const handleAdd = () => {
+  emit('add')
+}
+</script>

package/components/Knowledge/DeleteConfirmModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    :header="title"
+    :style="{ width: '32rem' }"
+    :closable="!isDeleting"
+    @update:visible="emit('update:visible', $event)"
+  >
+    <div class="flex flex-col gap-4">
+      <Message
+        severity="warn"
+        :closable="false"
+      >
+        {{ warning }}
+      </Message>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="delete-confirm-input"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.delete.confirm_label', { name: expectedName }) }}
+        </label>
+        <!-- Deliberately no placeholder: the label already names what to type, and putting it in the
+             field too turns a deliberate confirmation into copying the answer out of the box. -->
+        <InputText
+          id="delete-confirm-input"
+          v-model="typedName"
+          autocomplete="off"
+          :disabled="isDeleting"
+          @keyup.enter="confirmIfMatch"
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('knowledge.actions.cancel')"
+          severity="secondary"
+          outlined
+          :disabled="isDeleting"
+          @click="emit('update:visible', false)"
+        />
+        <Button
+          :label="t('knowledge.delete.actions.delete')"
+          severity="danger"
+          :disabled="!nameMatches"
+          :loading="isDeleting"
+          @click="emit('confirm')"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  visible: boolean
+  title: string
+  warning: string
+  expectedName: string
+  isDeleting?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'confirm': []
+}>()
+
+const { t } = useI18n()
+
+const typedName = ref('')
+
+const nameMatches = computed(() => typedName.value.trim() === props.expectedName)
+
+const confirmIfMatch = () => {
+  if (nameMatches.value && !props.isDeleting) emit('confirm')
+}
+
+// Reset the typed name whenever the dialog opens for a different target, so a previous confirmation
+// can never carry over and pre-satisfy the guard.
+watch(() => props.visible, (isVisible) => {
+  if (isVisible) typedName.value = ''
+})
+</script>

package/components/Knowledge/Document/List.vue

@@ -140,7 +140,7 @@ const { tenantId } = useTenant()
 const { getDocumentSourceUrl } = useDocumentUrl()
 const { deleteDocument, isDeleting } = useDeleteDocument()
 const { deleteDocuments, isDeleting: isBatchDeleting } = useDeleteDocuments()
-const { isScheduled, schedule, unschedule } = useScheduledDeletions(
+const { isScheduled, scheduledAt, schedule, unschedule } = useScheduledDeletions(
   () => route.params.db as string,
   () => route.params.namespace as string,
 )
@@ -163,18 +163,24 @@ const checkedDocuments = ref<DocumentDto[]>([])
 
 const formatted = (datestr: string) => useDateFormat(new Date(datestr), 'DD.MM.YYYY')
 
-const isDocumentDeleting = (document: DocumentDto) => isScheduled(document.id) && document.is_ingested
+const isDocumentDeleting = (document: DocumentDto) => isScheduled(document.id)
 
-// Processing documents are mid-ingestion; removing their source now would race the pipeline.
-const isDocumentDeletable = (document: DocumentDto) => document.is_ingested && !isDocumentDeleting(document)
+// Deleting is safe at any stage of ingestion: the API only removes the source file, and the pipeline
+// drops the document's partition before the remove job touches any store, which aborts an in-flight
+// run before it writes. So the only reason to withhold the action is a deletion already in flight.
+const isDocumentDeletable = (document: DocumentDto) => !isDocumentDeleting(document)
 
-// Ids derive from the source URI, so re-uploading a just-deleted file reuses its id. When that id
-// reappears as a placeholder, the scheduled entry is stale and must be cleared.
+// Ids derive from the source URI, so re-uploading a just-deleted file reuses its id and would inherit
+// its "Deleting" badge. An upload rewrites the document, so an updated_at newer than the moment we
+// scheduled the deletion means this row is the replacement, not the one still on its way out.
 watch(
   () => props.documents,
   (documents) => {
     const reUploadedIds = (documents ?? [])
-      .filter(document => !document.is_ingested && isScheduled(document.id))
+      .filter((document) => {
+        const requestedAt = scheduledAt(document.id)
+        return requestedAt != null && new Date(document.updated_at).getTime() > requestedAt
+      })
       .map(document => document.id)
     if (reUploadedIds.length > 0) {
       unschedule(reUploadedIds)
@@ -200,15 +206,20 @@ const onSelectAllChange = ({ checked }: { checked: boolean }) => {
 
 const handleRowClick = (event: DataTableRowClickEvent) => {
   const document = event.data as DocumentDto
-  if (document.is_ingested && !isDocumentDeleting(document)) {
+  if (!isDocumentDeleting(document)) {
     emit('selected', document)
   }
 }
 
+// Only a deletion in flight makes a row inert. A document still being ingested stays dimmed but usable —
+// otherwise a failed ingestion leaves a row that can be neither opened nor removed.
 const getRowClass = (data: DocumentDto) => {
-  if (!data.is_ingested || isDocumentDeleting(data)) {
+  if (isDocumentDeleting(data)) {
     return 'opacity-50 cursor-not-allowed pointer-events-none'
   }
+  if (!data.is_ingested) {
+    return 'opacity-50'
+  }
   return data.id === route.params.document_id ? 'bg-surface-100 dark:bg-surface-800' : ''
 }
 

package/components/Knowledge/Namespace/Card.vue

@@ -45,6 +45,16 @@
           severity="secondary"
           @click.stop="handleUploadClick"
         />
+        <Button
+          v-if="!autoSync"
+          v-tooltip.top="t('knowledge.delete_namespace')"
+          icon="pi pi-trash"
+          rounded
+          text
+          size="small"
+          severity="danger"
+          @click.stop="handleDeleteClick"
+        />
         <Badge
           :value="namespace.number_of_documents"
           size="large"
@@ -67,6 +77,8 @@ 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.
 const props = defineProps<{
   namespace: NamespaceDto
   autoSync?: boolean
@@ -75,6 +87,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   upload: [namespace: NamespaceDto]
   edit: [namespace: NamespaceDto]
+  delete: [namespace: NamespaceDto]
 }>()
 
 const route = useRoute()
@@ -105,4 +118,9 @@ const handleEditClick = (event: Event) => {
   event.stopPropagation()
   emit('edit', props.namespace)
 }
+
+const handleDeleteClick = (event: Event) => {
+  event.stopPropagation()
+  emit('delete', props.namespace)
+}
 </script>

package/components/Knowledge/Namespace/CreateModal.vue

@@ -190,9 +190,17 @@ const handleCreate = async () => {
     tenantId: tenantId.value!,
   }
 
-  await createNamespace(requestBody)
-  emit('success', { database: selectedDatabase.value, namespace: name.value })
-  closeModal()
+  try {
+    await createNamespace(requestBody)
+    emit('success', { database: selectedDatabase.value, namespace: name.value })
+    closeModal()
+  }
+  catch {
+    error.value = t('knowledge.form.create_error')
+  }
+  finally {
+    isCreating.value = false
+  }
 }
 
 watch(() => props.modelValue, (isVisible) => {

package/components/Role/AccessCapabilities.vue

@@ -21,8 +21,8 @@
         :group="group"
         :depth="0"
         :readonly="readonly"
-        @add="(rule) => emit('add', rule)"
-        @remove="(rule) => emit('remove', rule)"
+        @add="(rules) => emit('add', rules)"
+        @remove="(rules) => emit('remove', rules)"
       />
     </div>
     <p
@@ -55,8 +55,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  add: [rule: string]
-  remove: [rule: string]
+  add: [rules: string[]]
+  remove: [rules: string[]]
 }>()
 
 const { capabilities, capabilitiesAreLoading } = useAccessCapabilities(

package/components/Role/AccessCapabilityGroup.vue

@@ -78,8 +78,9 @@
         </span>
         <code
           v-if="cap.rule"
+          v-tooltip.top="ruleTooltip(cap)"
           class="mt-0.5 shrink-0 font-mono text-[11px] text-surface-300 transition-colors group-hover/cap:text-surface-500 dark:text-surface-600 dark:group-hover/cap:text-surface-400"
-        >{{ cap.rule }}</code>
+        >{{ cap.companion_rules?.length ? `${cap.rule} +${cap.companion_rules.length}` : cap.rule }}</code>
       </label>
     </div>
 
@@ -95,8 +96,8 @@
         :group="sub"
         :depth="depth + 1"
         :readonly="readonly"
-        @add="(rule) => emit('add', rule)"
-        @remove="(rule) => emit('remove', rule)"
+        @add="(rules) => emit('add', rules)"
+        @remove="(rules) => emit('remove', rules)"
       />
     </div>
   </div>
@@ -119,12 +120,27 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  add: [rule: string]
-  remove: [rule: string]
+  add: [rules: string[]]
+  remove: [rules: string[]]
 }>()
 
+// Two lists, two meanings. `companion_rules` is written and cleared with the row — a knowledge database
+// owns its namespaces, and the grammar has no single form covering a node and its subtree, so that row
+// needs both. `revoked_rules` is only ever cleared: an agent class does not own the profiles built from it,
+// so ticking must never write `<class>.>`, while unticking still takes an old ceiling's copy of it. Each
+// direction emits one payload because the parent writes them through a single `v-model`, which cannot
+// absorb two writes in the same tick — the second would read a model value the first had not yet updated.
+// The badge counts only what ticking grants; what unticking additionally takes is left to the tooltip.
+const ruleTooltip = (cap: Capability) =>
+  [
+    cap.companion_rules?.length ? t('role.capability_also_granted', { rules: cap.companion_rules.join(', ') }) : null,
+    cap.revoked_rules?.length ? t('role.capability_also_cleared', { rules: cap.revoked_rules.join(', ') }) : null,
+  ].filter(Boolean).join('\n') || undefined
+
 const onToggle = (cap: Capability, value: boolean) => {
   if (props.readonly || !cap.rule) return
-  emit(value ? 'add' : 'remove', cap.rule)
+  const granted = [cap.rule, ...(cap.companion_rules ?? [])]
+  if (value) emit('add', granted)
+  else emit('remove', [...granted, ...(cap.revoked_rules ?? [])])
 }
 </script>