@swiss-ai-hub/web 0.290.11

package/components/Knowledge/Namespace/CreateModal.vue

@@ -0,0 +1,203 @@
+<template>
+  <Dialog
+    :visible="modelValue"
+    modal
+    :header="t('knowledge.form.create.title')"
+    :style="{ width: '35rem' }"
+    @update:visible="emit('update:modelValue', $event)"
+    @hide="resetForm"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label
+          for="namespace-database-select"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.database.label') }}
+          <span class="ml-1 text-xs text-red-500">*</span>
+        </label>
+        <Dropdown
+          v-model="selectedDatabase"
+          input-id="namespace-database-select"
+          :options="databaseOptions"
+          option-label="displayName"
+          option-value="name"
+          :placeholder="t('knowledge.form.database.placeholder')"
+          :class="{ 'p-invalid': error }"
+          :disabled="isCreating"
+          class="w-full"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="namespace-name-input"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.folder_name.label') }}
+          <span class="ml-1 text-xs text-red-500">*</span>
+        </label>
+        <InputText
+          v-model="name"
+          input-id="namespace-name-input"
+          :placeholder="t('knowledge.form.folder_name.placeholder')"
+          :class="{ 'p-invalid': error || nameValidationError }"
+          :disabled="isCreating"
+        />
+        <small
+          v-if="nameValidationError"
+          class="text-red-500"
+        >{{ nameValidationError }}</small>
+        <small
+          v-else
+          class="text-gray-500"
+        >{{ t('knowledge.form.folder_name.help') }}</small>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="namespace-display-name-input"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.display_name.label') }}
+          <span class="ml-1 text-xs text-gray-400">(optional)</span>
+        </label>
+        <InputText
+          v-model="displayName"
+          input-id="namespace-display-name-input"
+          :placeholder="t('knowledge.form.display_name.placeholder')"
+          :disabled="isCreating"
+        />
+        <small class="text-gray-500">{{ t('knowledge.form.display_name.help') }}</small>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="namespace-description-textarea"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.description.label') }}
+          <span class="ml-1 text-xs text-gray-400">(optional)</span>
+        </label>
+        <Textarea
+          v-model="description"
+          input-id="namespace-description-textarea"
+          :placeholder="t('knowledge.form.description.placeholder')"
+          :disabled="isCreating"
+          rows="3"
+        />
+        <small class="text-gray-500">{{ t('knowledge.form.description.help') }}</small>
+      </div>
+
+      <small
+        v-if="error"
+        class="text-red-500"
+      >{{ error }}</small>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('knowledge.actions.cancel')"
+          severity="secondary"
+          outlined
+          @click="closeModal"
+        />
+        <Button
+          :label="t('knowledge.actions.create')"
+          :disabled="!canSubmit"
+          :loading="isCreating"
+          @click="handleCreate"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { CreateNamespaceRequest, DatabaseDto } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: boolean
+  databases: DatabaseDto[]
+  initialDatabase?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'success': [data: { database: string, namespace: string }]
+}>()
+
+const { mutateAsync: createNamespace } = useCreateNamespace()
+const { tenantId } = useTenant()
+
+const selectedDatabase = ref('')
+const name = ref('')
+const displayName = ref('')
+const description = ref('')
+const error = ref('')
+const isCreating = ref(false)
+
+const databaseOptions = computed(() =>
+  (props.databases || [])
+    .filter(db => !db.auto_sync)
+    .map(db => ({
+      name: db.name,
+      displayName: useChangeCase(db.name, 'capitalCase'),
+    })),
+)
+const nameValidationError = computed(() => {
+  if (!name.value.trim()) return ''
+
+  const namePattern = /^[a-zA-Z0-9_-]+$/
+  if (!namePattern.test(name.value)) {
+    return t('knowledge.form.folder_name.validation_error')
+  }
+
+  return ''
+})
+
+const canSubmit = computed(() => selectedDatabase.value.trim() && name.value.trim() && !nameValidationError.value && !isCreating.value)
+
+const closeModal = () => {
+  emit('update:modelValue', false)
+}
+
+const resetForm = () => {
+  selectedDatabase.value = ''
+  name.value = ''
+  displayName.value = ''
+  description.value = ''
+  error.value = ''
+  isCreating.value = false
+}
+
+const handleCreate = async () => {
+  if (!canSubmit.value) return
+
+  isCreating.value = true
+  error.value = ''
+
+  const requestBody: CreateNamespaceRequest & { database: string, namespace: string, tenantId: string } = {
+    database: selectedDatabase.value,
+    namespace: name.value,
+    folder_name: name.value,
+    display_name: displayName.value,
+    description: description.value,
+    tenantId: tenantId.value!,
+  }
+
+  await createNamespace(requestBody)
+  emit('success', { database: selectedDatabase.value, namespace: name.value })
+  closeModal()
+}
+
+watch(() => props.modelValue, (isVisible) => {
+  if (isVisible) {
+    selectedDatabase.value = props.initialDatabase || ''
+  }
+})
+</script>

package/components/Knowledge/Namespace/EditModal.vue

@@ -0,0 +1,134 @@
+<template>
+  <Dialog
+    :visible="modelValue"
+    modal
+    :header="t('knowledge.form.edit.title')"
+    :style="{ width: '35rem' }"
+    @update:visible="emit('update:modelValue', $event)"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm font-medium">
+          {{ t('knowledge.form.folder_name.label') }}
+        </p>
+        <InputText
+          :value="namespace?.name || ''"
+          disabled
+          class="bg-surface-100 dark:bg-surface-800"
+        />
+        <small class="text-gray-500">{{ t('knowledge.form.folder_name.edit_help') }}</small>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="edit-namespace-display-name-input"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.display_name.label') }}
+          <span class="ml-1 text-xs text-gray-400">(optional)</span>
+        </label>
+        <InputText
+          v-model="displayName"
+          input-id="edit-namespace-display-name-input"
+          :placeholder="t('knowledge.form.display_name.placeholder')"
+        />
+        <small class="text-gray-500">{{ t('knowledge.form.display_name.help') }}</small>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label
+          for="edit-namespace-description-textarea"
+          class="text-sm font-medium"
+        >
+          {{ t('knowledge.form.description.label') }}
+          <span class="ml-1 text-xs text-gray-400">(optional)</span>
+        </label>
+        <Textarea
+          v-model="description"
+          input-id="edit-namespace-description-textarea"
+          :placeholder="t('knowledge.form.description.placeholder')"
+          rows="3"
+        />
+        <small class="text-gray-500">{{ t('knowledge.form.description.help') }}</small>
+      </div>
+
+      <small
+        v-if="error"
+        class="text-red-500"
+      >{{ error }}</small>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('knowledge.actions.cancel')"
+          severity="secondary"
+          outlined
+          @click="closeModal"
+        />
+        <Button
+          :label="t('knowledge.actions.save')"
+          @click="handleSave"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { NamespaceDto, UpdateNamespaceRequest } from '@core/sdk/client'
+
+import { useI18n } from '#i18n'
+
+const props = defineProps<{
+  modelValue: boolean
+  namespace: NamespaceDto | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'success': []
+}>()
+
+const { t } = useI18n()
+const { mutateAsync: updateNamespace } = useUpdateNamespace()
+const { tenantId } = useTenant()
+
+const displayName = ref('')
+const description = ref('')
+const error = ref('')
+
+const closeModal = () => {
+  emit('update:modelValue', false)
+}
+
+const handleSave = async () => {
+  if (!props.namespace) return
+
+  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,
+    payload: ref(updatePayload),
+    tenantId: tenantId.value!,
+  })
+
+  emit('success')
+  closeModal()
+}
+
+watch(() => props.namespace, (newNamespace) => {
+  if (newNamespace) {
+    displayName.value = newNamespace.display_name || newNamespace.name
+    description.value = newNamespace.description || ''
+    error.value = ''
+  }
+})
+</script>

package/components/Knowledge/Namespace/EmptyCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col justify-center gap-3 rounded-xl border-2 border-dashed border-surface-300 p-4 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">
+      <div class="flex items-center justify-center p-3">
+        <i
+          class="pi pi-folder-plus text-surface-400"
+          style="font-size: 1.5rem"
+        />
+      </div>
+    </div>
+    <div class="text-center">
+      <h3 class="font-medium text-surface-600 dark:text-surface-400">
+        {{ t('knowledge.add_folder.title') }}
+      </h3>
+      <p class="text-sm text-surface-500 dark:text-surface-400">
+        {{ t('knowledge.add_folder.description') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  add: []
+}>()
+
+const handleAdd = () => {
+  emit('add')
+}
+</script>

package/components/Knowledge/Node/Content.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="group relative rounded-lg border border-surface-200 bg-white p-4 dark:border-surface-700 dark:bg-surface-800"
+    :class="{ 'opacity-50': !active }"
+  >
+    <Tag
+      v-if="node.score"
+      v-tooltip="scoreText"
+      class="absolute right-1 top-1 hidden text-xs group-hover:block"
+      :class="{ '!block': alwaysShowScore }"
+
+      :value="scoreRank"
+      :severity="scoreColor"
+    />
+    <MarkdownRenderer
+      :md="node.content"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IngestedNode } from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  node: IngestedNode
+  alwaysShowScore?: boolean
+  active?: boolean
+}>(), {
+  alwaysShowScore: false,
+  active: true,
+})
+
+const scoreColor = computed<string>(() => {
+  const score = props.node.score
+  if (!score) return ''
+  if (score <= 0.5) {
+    return 'danger'
+  }
+  if (score <= 0.85) {
+    return 'warn'
+  }
+  return 'success'
+})
+
+const scoreText = computed<string>(() => {
+  const score = props.node.score
+  if (!score) return ''
+  return `Relevance: ${Math.round(score * 100)}%`
+})
+
+const scoreRank = computed<string>(() => {
+  const score = props.node.score
+  if (!score) return ''
+  if (score <= 0.5) {
+    return 'D'
+  }
+  if (score <= 0.75) {
+    return 'C'
+  }
+  if (score <= 0.85) {
+    return 'B'
+  }
+  if (score <= 0.90) {
+    return 'A'
+  }
+  if (score <= 0.95) {
+    return 'A+'
+  }
+  return 'A++'
+})
+</script>

package/components/Markdown/Renderer.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="content overflow-x-auto">
+    <MDC
+      :value="md"
+      :tag="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  md: string
+}>()
+</script>
+
+<style scoped>
+.content {
+  @apply font-light text-xs
+}
+.content :deep(h1) {
+  @apply my-8 text-xl font-bold before:content-['#'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(h2) {
+  @apply mt-12 text-lg font-bold before:content-['##'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(h3) {
+  @apply mt-10 text-base font-bold before:content-['###'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(h4) {
+  @apply mt-8 font-bold before:content-['####'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(h5) {
+  @apply mt-6 font-bold before:content-['#####'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(h6) {
+  @apply mt-4 font-bold before:content-['######'] before:pr-1 before:text-gray-400;
+}
+
+.content :deep(p) {
+  @apply mt-2 ;
+}
+
+.content :deep(blockquote) {
+  @apply px-4 py-3 my-4 italic border-s-4 dark:border-gray-500/20 dark:bg-surface-800/20;
+}
+
+.content :deep(ul) {
+  @apply list-disc list-outside mt-2;
+}
+
+.content :deep(ol) {
+  @apply list-decimal list-outside mt-2;
+}
+
+.content :deep(ul > li) {
+  @apply ml-4 mt-2;
+}
+
+.content :deep(ol > li) {
+  @apply ml-6 mt-2;
+}
+
+.content :deep(strong) {
+  @apply font-bold;
+}
+
+.content :deep(p a) {
+  @apply  border-b border-dotted border-gray-400  after:content-['↗'] after:pl-[1px];
+}
+.content :deep(ul a) {
+  @apply  border-b border-dotted border-gray-400  after:content-['↗'] after:pl-[1px];
+}
+.content :deep(table) {
+  @apply my-8;
+}
+.content :deep(th) {
+  @apply border border-surface-200 dark:border-surface-500 p-2 text-left font-bold bg-surface-100 dark:bg-surface-800;
+}
+.content :deep(td) {
+  @apply border border-surface-200 dark:border-surface-500 p-2 text-left;
+}
+</style>

package/components/Memory/DetailPage.vue

@@ -0,0 +1,48 @@
+<template>
+  <StructuralColumn
+    v-if="selectedMemory"
+    :close-route="closeRoute"
+    child-column
+    :title="t('memory.detail.title')"
+  >
+    <MemoryEdit
+      :memory="selectedMemory"
+      @update="handleUpdate"
+      @delete="handleDelete"
+      @close="handleClose"
+    />
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  memoryType: 'user' | 'organization'
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+
+const closeRoute = computed(() => `/service/${props.memoryType}-memories/list`)
+
+// Create memory composables using factory based on type
+const { useMemories, useUpdateMemory, useDeleteMemory } = createMemoryComposables({
+  type: props.memoryType,
+})
+
+const { paginatedMemories } = useMemories()
+const { updateMemory } = useUpdateMemory()
+const { deleteMemory } = useDeleteMemory()
+
+const selectedMemory = computed(() => {
+  const memoryId = route.params.memory_id as string
+  return paginatedMemories.value.find(m => m.id === memoryId)
+})
+
+// Use shared CRUD composable
+const { handleUpdate, handleDelete, handleClose } = useMemoryCRUD({
+  selectedMemory,
+  updateMemory,
+  deleteMemory,
+  closeRoute: closeRoute.value,
+})
+</script>