@swiss-ai-hub/web 0.320.0 → 0.321.0

package/components/FormKit/AgentSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-4">
-    <!-- Agent Class Selection -->
-    <div>
+    <!-- Agent Class Selection (omitted when the config pins the class) -->
+    <div v-if="!pinnedClass">
       <label
         for="agent-class-select"
         class="mb-1 block text-sm font-medium"
@@ -139,6 +139,7 @@ interface AgentSelectorProps {
     value?: AgentSelectorValue | null
     attrs: Record<string, unknown>
     startEvent?: string
+    agentClass?: string
     classPlaceholder?: string
     idPlaceholder?: string
     filter?: boolean
@@ -151,6 +152,9 @@ const { tenantId } = useTenant()
 
 // Get custom props from context (FormKit passes them there, not as direct props)
 const startEvent = computed(() => props.context.startEvent)
+// Set by configs that already know which blueprint answers: the class dropdown is not rendered and only
+// this class's profiles are offered.
+const pinnedClass = computed(() => props.context.agentClass)
 const classPlaceholder = computed(() => props.context.classPlaceholder)
 const idPlaceholder = computed(() => props.context.idPlaceholder)
 const filter = computed(() => props.context.filter ?? true)
@@ -166,7 +170,7 @@ const currentValue = computed(() => props.context.value ?? null)
 
 // Selected class (computed property that syncs with the form value)
 const selectedClass = computed({
-  get: () => currentValue.value?.agent_class ?? null,
+  get: () => currentValue.value?.agent_class ?? pinnedClass.value ?? null,
   set: (value: string | null) => {
     if (value) {
       // When class changes, reset agent ID and fetch instances
@@ -290,16 +294,25 @@ async function fetchInstances(agentClass: string) {
 
 // Fetch classes on mount
 onMounted(() => {
-  fetchClasses()
+  // A pinned class needs no class list — nothing renders it, and the profile dropdown is driven by
+  // fetchInstances alone.
+  if (!pinnedClass.value) {
+    fetchClasses()
+  }
 
-  // If there's already a selected class, fetch its instances
-  if (currentValue.value?.agent_class) {
-    fetchInstances(currentValue.value.agent_class)
+  // Pinned, or already chosen: either way the profile dropdown needs that class's instances up front.
+  const classToLoad = currentValue.value?.agent_class ?? pinnedClass.value
+  if (classToLoad) {
+    fetchInstances(classToLoad)
   }
 })
 
 // Refetch if startEvent changes
 watch(startEvent, () => {
+  // A pinned class is not filtered by start event, and its class list is never fetched — so the check below
+  // would find no match and clear a perfectly valid selection.
+  if (pinnedClass.value) return
+
   // Clear selection if current class no longer matches filter
   if (selectedClass.value && !filteredClassOptions.value.some(opt => opt.name === selectedClass.value)) {
     props.context.node.input(null)

package/components/FormKit/Repeater.vue

@@ -99,11 +99,8 @@ const isRemoveDisabled = computed(() => {
 
 function addItem() {
   if (isAddDisabled.value) return
-  if (!modelValue.value) {
-    modelValue.value = []
-  }
   rowKeys.value.push(makeRowKey())
-  modelValue.value.push(props.defaultItem ? cloneDeep(props.defaultItem) : {})
+  modelValue.value = [...items.value, props.defaultItem ? cloneDeep(props.defaultItem) : {}]
 }
 
 function removeItem(index: number) {

package/components/FormKit/VectorStoreInput.vue

@@ -44,8 +44,28 @@
       </Select>
     </div>
 
-    <!-- Namespace Selection (shown when database selected) -->
-    <div v-if="selectedDatabase">
+    <!-- Namespace scope (shown when database selected) -->
+    <div
+      v-if="selectedDatabase"
+      class="flex items-center gap-2"
+    >
+      <ToggleSwitch
+        v-model="allNamespaces"
+        input-id="vector-store-all-namespaces"
+      />
+      <label
+        for="vector-store-all-namespaces"
+        class="text-sm"
+      >{{ t('lib.vectorStore.allNamespaces.label') }}</label>
+    </div>
+    <small
+      v-if="selectedDatabase && allNamespaces"
+      class="-mt-3 text-surface-500"
+    >
+      {{ t('lib.vectorStore.allNamespaces.help', { count: namespaceOptions.length }) }}
+    </small>
+
+    <div v-if="selectedDatabase && !allNamespaces">
       <label
         for="vector-store-namespaces-select"
         class="mb-1 block text-sm font-medium"
@@ -104,6 +124,7 @@ import type { DatabaseDto } from '@core/sdk/client'
 interface VectorStoreInputValue {
   collection_name: string
   index_namespaces: string[]
+  all_namespaces: boolean
   allowed_metadata_filter_fields: string[]
 }
 
@@ -154,7 +175,7 @@ const selectedDatabase = computed({
   set: (value: string | null) => {
     if (value) {
       // When database changes, reset namespaces and allowed filter fields
-      emitValue(value, [], [])
+      emitValue(value, [], false, [])
     }
     else {
       props.context.node.input(null)
@@ -162,12 +183,22 @@ const selectedDatabase = computed({
   },
 })
 
+// Whole-database scope: switching it on discards any named namespaces so the two never coexist
+const allNamespaces = computed({
+  get: () => currentValue.value?.all_namespaces ?? false,
+  set: (value: boolean) => {
+    if (selectedDatabase.value) {
+      emitValue(selectedDatabase.value, value ? [] : selectedNamespaces.value, value, allowedFilterFields.value)
+    }
+  },
+})
+
 // 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)
+      emitValue(selectedDatabase.value, value, false, allowedFilterFields.value)
     }
   },
 })
@@ -179,7 +210,7 @@ const chipsInputContext = computed(() => ({
   node: {
     input: (value: string[]) => {
       if (selectedDatabase.value) {
-        emitValue(selectedDatabase.value, selectedNamespaces.value, value)
+        emitValue(selectedDatabase.value, selectedNamespaces.value, allNamespaces.value, value)
       }
     },
   },
@@ -189,10 +220,16 @@ const chipsInputContext = computed(() => ({
 }))
 
 // Emit complete value object
-function emitValue(collectionName: string, namespaces: string[], allowedFilterFieldKeys: string[]) {
+function emitValue(
+  collectionName: string,
+  namespaces: string[],
+  wholeDatabase: boolean,
+  allowedFilterFieldKeys: string[],
+) {
   props.context.node.input({
     collection_name: collectionName,
     index_namespaces: namespaces,
+    all_namespaces: wholeDatabase,
     allowed_metadata_filter_fields: allowedFilterFieldKeys,
   })
 }

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/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) => {