@swiss-ai-hub/web 0.290.11

package/components/Knowledge/Document/List.vue

@@ -0,0 +1,140 @@
+<template>
+  <DataTable
+    :value="documents"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    :selection="selectedDocument"
+    :row-class="getRowClass"
+    :sort-field="sortField ?? undefined"
+    :sort-order="sortOrder"
+    removable-sort
+    size="small"
+    @update:selection="handleSelection"
+    @sort="handleSort"
+  >
+    <Column
+      field="document_title"
+      :header="t('document.list.title')"
+      sortable
+    >
+      <template #body="{ data }">
+        <div class="flex items-center gap-2">
+          <p
+            class="font-bold"
+          >
+            {{ data.document_title }}
+          </p>
+          <div
+            v-if="!data.is_ingested"
+            class="flex items-center gap-2"
+          >
+            <Tag
+              :value="t('document.list.is_processing')"
+              size="small"
+              icon="pi pi-clock"
+              severity="info"
+            />
+          </div>
+        </div>
+      </template>
+    </Column>
+    <Column
+      field="created_at"
+      :header="t('document.list.created')"
+      sortable
+    >
+      <template #body="{ data }">
+        <p>{{ formatted(data.created_at) }}</p>
+      </template>
+    </Column>
+    <Column
+      field="updated_at"
+      :header="t('document.list.updated_at')"
+      sortable
+    >
+      <template #body="{ data }">
+        <p>{{ formatted(data.updated_at) }}</p>
+      </template>
+    </Column>
+    <Column
+      field="number_of_pages"
+      :header="t('document.list.number_of_pages')"
+    >
+      <template #body="{ data }">
+        <Badge
+          :value="data.number_of_pages ?? '-'"
+        />
+      </template>
+    </Column>
+    <Column
+      field="source"
+      :header="t('document.list.download')"
+    >
+      <template #body="{ data }">
+        <Button
+          v-if="data.source"
+          rounded
+          size="small"
+          variant="outlined"
+          icon="pi pi-download"
+          @click="() => downloadFile(data.id)"
+        />
+        <span
+          v-else
+          class="text-sm text-surface-400"
+        >-</span>
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type { DocumentDto } from '@core/sdk/client'
+import type { DataTableSortEvent } from 'primevue/datatable'
+
+const route = useRoute()
+const { t } = useI18n()
+const { tenantId } = useTenant()
+const { getDocumentSourceUrl } = useDocumentUrl()
+
+const props = defineProps<{
+  documents: DocumentDto[]
+  sortField: string | null
+  sortOrder: 1 | -1
+}>()
+
+const emit = defineEmits<{
+  selected: [document: DocumentDto]
+  sort: [field: string | null, order: 1 | -1]
+}>()
+
+const formatted = (datestr: string) => useDateFormat(new Date(datestr), 'DD.MM.YYYY')
+const selectedDocument = computed(() => {
+  return props.documents.filter((document: DocumentDto) => {
+    return document.id === route.params.document_id
+  })
+})
+
+const handleSelection = (document: DocumentDto) => {
+  if (document.is_ingested) {
+    emit('selected', document)
+  }
+}
+
+const getRowClass = (data: DocumentDto) => {
+  return data.is_ingested ? '' : 'opacity-50 cursor-not-allowed pointer-events-none'
+}
+
+const handleSort = (event: DataTableSortEvent) => {
+  const field = event.sortField as string | null
+  const order = (event.sortOrder ?? 1) as 1 | -1
+  emit('sort', field, order)
+}
+
+const downloadFile = async (documentId: string) => {
+  const database = route.params.db as string
+  const namespace = route.params.namespace as string
+  const url = await getDocumentSourceUrl(tenantId.value!, database, namespace, documentId)
+  window.open(url, '_blank')
+}
+</script>

package/components/Knowledge/Document/Overview.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="flex justify-between text-xs opacity-60">
+      <div>{{ document.document_title }}</div>
+      <div>{{ createdAt }}</div>
+    </div>
+    <Divider />
+    <slot />
+    <Divider />
+    <div class="flex justify-between text-xs opacity-60">
+      <div>{{ t('namespace') }}: {{ document.namespace }}</div>
+      <div>{{ t('document.list.number_of_pages') }}: {{ document.number_of_pages }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DocumentDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  document: DocumentDto
+}>()
+
+const { t } = useI18n()
+const createdAt = computed(() => {
+  return useDateFormat(new Date(props.document.created_at), 'DD.MM.YYYY HH:mm:ss')
+})
+</script>

package/components/Knowledge/Document/UploadModal.vue

@@ -0,0 +1,298 @@
+<template>
+  <Dialog
+    v-model:visible="isVisible"
+    modal
+    :header="t('knowledge.documents.upload.title')"
+    :style="{ width: '30rem' }"
+    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+  >
+    <div class="flex flex-col gap-6">
+      <div
+        ref="dropZone"
+        class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-surface-300 p-8 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,
+          'border-red-500 bg-red-50 dark:bg-red-900/20': hasError,
+        }"
+        @dragover.prevent="handleDragOver"
+        @dragleave.prevent="handleDragLeave"
+        @drop.prevent="handleDrop"
+        @click="() => fileInput?.click()"
+      >
+        <i
+          class="pi pi-cloud-upload mb-4 text-surface-400"
+          style="font-size: 3rem"
+        />
+        <p class="mb-2 text-sm text-surface-600 dark:text-surface-400">
+          <span class="font-semibold">{{ t('knowledge.documents.upload.drag_and_drop') }}</span>
+        </p>
+        <div
+          v-if="selectedFiles.length > 0"
+          class="mt-4 w-full"
+        >
+          <div
+            v-for="(file, index) in selectedFiles"
+            :key="index"
+            class="flex items-center justify-between rounded bg-surface-100 p-2 dark:bg-surface-700"
+          >
+            <div class="flex items-center gap-2">
+              <i class="pi pi-file text-surface-400" />
+              <span class="text-sm">{{ file.name }}</span>
+            </div>
+            <Button
+              icon="pi pi-times"
+              text
+              rounded
+              size="small"
+              severity="secondary"
+              @click="removeFile(index)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="props.namespace && props.database"
+        class="flex flex-col gap-2"
+      >
+        <p class="text-sm font-medium">
+          {{ t('knowledge.documents.upload.target_location.label') }}
+        </p>
+        <div class="flex items-center gap-2 rounded-lg border border-surface-200 bg-surface-50 p-3 dark:border-surface-700 dark:bg-surface-800">
+          <i
+            class="pi pi-database text-surface-400"
+            style="font-size: 1rem"
+          />
+          <span class="text-sm text-surface-600 dark:text-surface-300">{{ databaseDisplayName }}</span>
+          <i
+            class="pi pi-angle-right text-surface-400"
+            style="font-size: 0.8rem"
+          />
+          <i
+            class="pi pi-folder text-primary-500"
+            style="font-size: 1rem"
+          />
+          <span class="text-sm font-medium text-surface-800 dark:text-surface-100">{{ namespaceDisplayName }}</span>
+        </div>
+        <small class="text-surface-500 dark:text-surface-400">
+          {{ t('knowledge.documents.upload.target_location.help') }}
+        </small>
+      </div>
+
+      <Message
+        v-if="errorMessage"
+        severity="error"
+        :closable="false"
+      >
+        {{ errorMessage }}
+      </Message>
+
+      <div
+        v-if="isUploading"
+        class="flex flex-col gap-2"
+      >
+        <div class="flex justify-between text-sm">
+          <span>{{ currentUploadFile }}</span>
+          <span>{{ uploadProgress }}%</span>
+        </div>
+        <ProgressBar :value="uploadProgress" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('knowledge.documents.upload.actions.cancel')"
+          severity="secondary"
+          outlined
+          :disabled="isUploading"
+          @click="closeModal"
+        />
+        <Button
+          :label="t('knowledge.documents.upload.actions.upload')"
+          :disabled="!canUpload"
+          :loading="isUploading"
+          @click="handleUpload"
+        />
+      </div>
+    </template>
+
+    <input
+      ref="fileInput"
+      type="file"
+      multiple
+      :accept="acceptedFileTypesString"
+      class="hidden"
+      @change="handleFileSelect"
+    >
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+interface Props {
+  visible: boolean
+  database: string
+  namespace: string
+  databaseDisplayName?: string
+  namespaceDisplayName?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const { t } = useI18n()
+
+const databaseDisplayName = computed(() => {
+  return props.databaseDisplayName || useChangeCase(props.database, 'capitalCase').value
+})
+
+const namespaceDisplayName = computed(() => {
+  return props.namespaceDisplayName || useChangeCase(props.namespace, 'capitalCase').value
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'success': [data: { files: File[], namespace: string, database: string }]
+}>()
+
+const { uploadFile } = useFileUpload()
+const { supportedFileTypes } = useSupportedFileTypes()
+const { tenantId } = useTenant()
+
+const acceptedFileTypesString = computed(() => {
+  return (supportedFileTypes.value ?? []).join(', ')
+})
+const selectedFiles = ref<File[]>([])
+const isDragOver = ref(false)
+const isUploading = ref(false)
+const errorMessage = ref('')
+const hasError = ref(false)
+const uploadProgress = ref(0)
+const currentUploadFile = ref('')
+
+const fileInput = ref<HTMLInputElement>()
+
+const isVisible = computed({
+  get: () => props.visible,
+  set: value => emit('update:visible', value),
+})
+
+const canUpload = computed(() => {
+  return selectedFiles.value.length > 0 && !isUploading.value
+})
+
+const addFiles = (files: FileList | File[]) => {
+  errorMessage.value = ''
+  hasError.value = false
+
+  const validFiles: File[] = []
+  const invalidFiles: File[] = []
+  const supportedTypes: string[] = supportedFileTypes.value ?? []
+
+  for (const file of Array.from(files)) {
+    const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`
+
+    const isDuplicate = selectedFiles.value.some(existing => existing.name === file.name && existing.size === file.size)
+    const isSupported = supportedTypes.includes(fileExtension)
+
+    if (!isDuplicate && isSupported) {
+      validFiles.push(file)
+    }
+    else if (!isSupported) {
+      invalidFiles.push(file)
+    }
+  }
+
+  if (validFiles.length > 0) {
+    selectedFiles.value.push(...validFiles)
+  }
+
+  if (invalidFiles.length > 0) {
+    hasError.value = true
+    errorMessage.value = t('knowledge.documents.upload.errors.unsupported_file_type', {
+      count: invalidFiles.length,
+      supportedTypes: acceptedFileTypesString.value,
+    })
+  }
+}
+
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+  errorMessage.value = ''
+  hasError.value = false
+}
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files) {
+    addFiles(target.files)
+  }
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  isDragOver.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault()
+  isDragOver.value = false
+}
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault()
+  isDragOver.value = false
+
+  if (event.dataTransfer?.files) {
+    addFiles(event.dataTransfer.files)
+  }
+}
+
+const handleUpload = async () => {
+  if (!canUpload.value) return
+
+  const namespace = props.namespace
+  const database = props.database
+
+  isUploading.value = true
+  errorMessage.value = ''
+
+  for (const file of selectedFiles.value) {
+    currentUploadFile.value = file.name
+
+    await uploadFile({
+      filename: file.name,
+      file,
+      namespace,
+      database,
+      tenantId: tenantId.value!,
+    })
+  }
+
+  emit('success', { files: selectedFiles.value, namespace, database })
+  closeModal()
+}
+
+const resetState = () => {
+  selectedFiles.value = []
+  errorMessage.value = ''
+  hasError.value = false
+  isUploading.value = false
+  uploadProgress.value = 0
+  currentUploadFile.value = ''
+}
+
+const closeModal = () => {
+  resetState()
+  emit('update:visible', false)
+}
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    resetState()
+  }
+})
+</script>

package/components/Knowledge/Document/WithNodes.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    v-if="!(documentNodesAreLoading || documentIsLoading)"
+    class="relative rounded-3xl border border-surface-100 bg-white p-9 dark:border-surface-600 dark:bg-surface-800"
+  >
+    <KnowledgeDocumentOverview :document="document">
+      <div class="mb-4 flex justify-end">
+        <Button
+          v-if="document?.source"
+          icon="pi pi-external-link"
+          :label="t('knowledge.original.view_button')"
+          size="small"
+          variant="outlined"
+          @click="openOriginalDocument"
+        />
+      </div>
+      <KnowledgeNodeContent
+        v-for="node in combinedNodes"
+        :key="node.node.id"
+        always-show-score
+        :node="node.node"
+        :active="node.isActive"
+      />
+    </KnowledgeDocumentOverview>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type IngestedDocument, getDocumentById, getNodesForDocument, type IngestedNode } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+const props = defineProps<{
+  db: string
+  namespace: string
+  documentId: string
+  inputNodes: IngestedNode[]
+  showInactive: boolean
+}>()
+
+const { t } = useI18n()
+const { tenantId } = useTenant()
+const { getDocumentSourceUrl } = useDocumentUrl()
+
+const isTenantReady = useTenantReady()
+
+const { data: document, isPending: documentIsLoading } = useQuery<IngestedDocument>({
+  key: () => ['knowledge', 'db', props.db, 'namespace', props.namespace, 'document', props.documentId as string],
+  staleTime: minutesToMilliseconds(5),
+  enabled: isTenantReady,
+  query: async () => {
+    return await getDocumentById({
+      composable: '$fetch',
+      path: {
+        tenant_id: tenantId.value!,
+        database: props.db,
+        namespace: props.namespace,
+        document_id: props.documentId as string,
+      },
+    })
+  },
+})
+
+const { data: documentNodes, isPending: documentNodesAreLoading } = useQuery<Node[]>({
+  key: () => ['knowledge', 'db', props.db, 'namespace', props.namespace, 'document', props.documentId, 'nodes'],
+  staleTime: minutesToMilliseconds(5),
+  enabled: isTenantReady,
+  query: async () => {
+    return await getNodesForDocument({
+      composable: '$fetch',
+      path: {
+        tenant_id: tenantId.value!,
+        database: props.db,
+        namespace: props.namespace,
+        document_id: props.documentId as string,
+      },
+    })
+  },
+})
+
+const openOriginalDocument = async () => {
+  if (!document.value?.source) return
+
+  try {
+    const url = await getDocumentSourceUrl(tenantId.value!, props.db, props.namespace, props.documentId)
+    window.open(url, '_blank')
+  }
+  catch (e) {
+    console.error('Error opening document:', e)
+  }
+}
+
+const combinedNodes = computed<{ node: IngestedNode, isActive: boolean }[]>(() => {
+  const combNodes: { node: IngestedNode, isActive: boolean }[] = [];
+  (documentNodes.value ?? []).forEach((node: IngestedNode) => {
+    const activeNode = props.inputNodes.find((n: IngestedNode) => n.id === node.id)
+    if (activeNode) {
+      combNodes.push({ node: activeNode, isActive: true })
+    }
+    else if (props.showInactive) {
+      combNodes.push({ node, isActive: false })
+    }
+  })
+  return combNodes
+})
+</script>

package/components/Knowledge/Namespace/Card.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col gap-3 rounded-xl border border-surface-200 p-4 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+    :class="{ 'bg-surface-100 dark:bg-surface-800': isActive }"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <div class="flex items-center justify-start gap-2">
+        <div
+          class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+        >
+          <Icon
+            name="mage:book"
+            size="1.5em"
+          />
+        </div>
+        <div>
+          <h3 class="font-semibold opacity-80">
+            {{ displayName }}
+          </h3>
+          <p
+            v-if="namespace.description"
+            class="text-sm text-surface-500 dark:text-surface-400"
+          >
+            {{ namespace.description }}
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button
+          v-tooltip.top="t('knowledge.edit_namespace')"
+          icon="pi pi-pencil"
+          rounded
+          text
+          size="small"
+          severity="secondary"
+          @click.stop="handleEditClick"
+        />
+        <Button
+          v-if="!autoSync"
+          v-tooltip.top="t('knowledge.upload_documents')"
+          icon="pi pi-upload"
+          rounded
+          text
+          size="small"
+          severity="secondary"
+          @click.stop="handleUploadClick"
+        />
+        <Badge
+          :value="namespace.number_of_documents"
+          size="large"
+        />
+      </div>
+    </div>
+    <div>
+      <div class="text-sm">
+        {{ t('knowledge.created_at') }} <span class="font-light">{{ createdAt }}</span>
+      </div>
+      <div class="text-sm">
+        {{ t('knowledge.updated_at') }} <span class="font-light">{{ updatedAt }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { NamespaceDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  namespace: NamespaceDto
+  autoSync?: boolean
+}>()
+
+const emit = defineEmits<{
+  upload: [namespace: NamespaceDto]
+  edit: [namespace: NamespaceDto]
+}>()
+
+const route = useRoute()
+const { t } = useI18n()
+
+const displayName = computed(() => {
+  // Use display_name if available, otherwise fall back to formatted technical name
+  return props.namespace.display_name || useChangeCase(props.namespace.name, 'capitalCase')
+})
+
+const createdAt = computed(() => {
+  return useDateFormat(props.namespace.created_at * 1000, 'DD.MM.YYYY')
+})
+const updatedAt = computed(() => {
+  return useDateFormat(props.namespace.updated_at * 1000, 'DD.MM.YYYY HH:mm')
+})
+
+const isActive = computed(() => {
+  return route.params.namespace === props.namespace.name
+})
+
+const handleUploadClick = (event: Event) => {
+  event.stopPropagation()
+  emit('upload', props.namespace)
+}
+
+const handleEditClick = (event: Event) => {
+  event.stopPropagation()
+  emit('edit', props.namespace)
+}
+</script>