@swiss-ai-hub/web 0.290.11

package/pages/[tenant]/service/agents/templates.vue

@@ -0,0 +1,102 @@
+<template>
+  <StructuralColumn
+    :title="t('agent.title')"
+    :loading="agentClassesAreLoading"
+  >
+    <SelectButton
+      :model-value="activeNavItem"
+      :options="navItems"
+      data-key="key"
+      option-label="name"
+      size="small"
+      @update:model-value="toNavItem"
+    />
+    <div class="flex flex-col gap-12 pt-4">
+      <div
+        v-for="group in groupedTemplates"
+        :key="group.agentClass"
+      >
+        <div class="pb-4">
+          <div class="flex items-center gap-2 pb-2">
+            <Icon
+              :name="group.icon"
+              size="2em"
+              class="text-surface-500"
+            />
+            <span class="text-lg font-medium">{{ group.name }}</span>
+          </div>
+          <span
+            v-if="group.description"
+            class="pb-2 text-xs text-surface-500"
+          >
+            {{ group.description }}
+          </span>
+        </div>
+        <div class="grid grid-cols-2 gap-4 2xl:grid-cols-2">
+          <AgentTemplateCard
+            v-for="(tmpl, index) in group.templates"
+            :key="`${group.agentClass}-${index}`"
+            :template="tmpl"
+            :agent-class-name="group.name"
+            :locale="locale"
+            @click="openCreateModalWithTemplate(group.agentClass, tmpl)"
+          />
+        </div>
+      </div>
+      <div
+        v-if="groupedTemplates.length === 0"
+        class="flex flex-col items-center justify-center py-12 text-center"
+      >
+        <p class="text-sm text-surface-500">
+          {{ t('agent.templates.empty') }}
+        </p>
+      </div>
+    </div>
+    <AgentCreateModal
+      v-model="createModalOpen"
+      :initial-class="selectedClassForCreate"
+      :initial-data="initialDataForCreate"
+      @success="handleCreateSuccess"
+    />
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t, locale } = useI18n()
+
+const { agentClasses, agentClassesAreLoading } = useAgentClasses()
+const { navItems, activeNavItem, toNavItem } = useAgentNavigation()
+
+const createModalOpen = ref(false)
+const selectedClassForCreate = ref('')
+const initialDataForCreate = ref<Record<string, unknown> | null>(null)
+
+const openCreateModalWithTemplate = (agentClass: string, template: Record<string, unknown>) => {
+  selectedClassForCreate.value = agentClass
+  initialDataForCreate.value = template
+  createModalOpen.value = true
+}
+
+const groupedTemplates = computed(() => {
+  if (!agentClasses.value) return []
+
+  const localeKey = locale.value as 'de' | 'en' | 'fr' | 'it'
+
+  return agentClasses.value
+    .filter(classInfo => classInfo.templates && classInfo.templates.length > 0)
+    .map(classInfo => ({
+      agentClass: classInfo.agent_class,
+      name: classInfo.name?.[localeKey] ?? classInfo.agent_class,
+      description: classInfo.description?.[localeKey] ?? '',
+      icon: classInfo.icon ?? 'meteor-icons:robot',
+      templates: classInfo.templates!,
+    }))
+    .sort((a, b) => a.agentClass.localeCompare(b.agentClass))
+})
+
+const handleCreateSuccess = (agentClass: string, agentId: string) => {
+  router.push(tenantPath(`/service/agents/${agentClass}-${agentId}/overview`))
+}
+</script>

package/pages/[tenant]/service/agents.vue

@@ -0,0 +1,185 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      v-if="!isTemplatesRoute"
+      :title="t('agent.title')"
+      :loading="isLoading"
+      size="large"
+    >
+      <SelectButton
+        :model-value="activeNavItem"
+        :options="navItems"
+        data-key="key"
+        option-label="name"
+        size="small"
+        @update:model-value="toNavItem"
+      />
+      <div class="flex flex-col gap-12 pt-4">
+        <div
+          v-for="group in groupedAgents"
+          :key="group.agentClass"
+        >
+          <div class="pb-4">
+            <div class="flex items-center gap-2 pb-2">
+              <Icon
+                :name="group.icon"
+                size="2em"
+                class="text-surface-500"
+              />
+              <span class="text-lg font-medium">{{ group.name }}</span>
+              <Button
+                v-if="group.networkGraph"
+                v-tooltip.top="t('agent.workflow.view_tooltip')"
+                severity="secondary"
+                text
+                rounded
+                size="small"
+                @click="openWorkflowModal(group)"
+              >
+                <Icon
+                  name="mage:arrows-all-direction-2"
+                  size="1.25em"
+                />
+              </Button>
+            </div>
+            <span
+              v-if="group.description"
+              class="pb-2 text-xs text-surface-500"
+            >
+              {{ group.description }}
+            </span>
+          </div>
+          <div class="grid grid-cols-3 gap-4">
+            <AgentCard
+              v-for="agent in group.instances"
+              :key="`${agent.agent_class}-${agent.agent_id}`"
+              :agent="agent"
+              @click="() => toAgent(agent)"
+              @clone="handleClone"
+            />
+            <AgentEmptyCard
+              v-if="group.isAvailable"
+              @add="openCreateModal(group.agentClass)"
+            />
+          </div>
+        </div>
+      </div>
+      <AgentCreateModal
+        v-model="createModalOpen"
+        :initial-class="selectedClassForCreate"
+        :initial-data="initialDataForCreate"
+        @success="handleCreateSuccess"
+      />
+      <WorkflowModal
+        v-model="workflowModalOpen"
+        :graph-data="selectedGroupForWorkflow?.networkGraph"
+        :header="selectedGroupForWorkflow ? `${t('agent.workflow.title')} — ${selectedGroupForWorkflow.name}` : undefined"
+      />
+    </StructuralColumn>
+
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import type { FullAgentInstanceDto, WorkflowGraph } from '@core/sdk/client'
+
+type AgentGroup = {
+  agentClass: string
+  name: string
+  description: string
+  icon: string
+  instances: FullAgentInstanceDto[]
+  isAvailable: boolean
+  networkGraph: WorkflowGraph | null
+}
+
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const { t, locale } = useI18n()
+
+const { agentInstances, agentInstancesAreLoading } = useAgentInstances()
+const { agentClasses, agentClassesAreLoading } = useAgentClasses()
+const { navItems, activeNavItem, toNavItem } = useAgentNavigation()
+
+const isLoading = computed(() => agentInstancesAreLoading.value || agentClassesAreLoading.value)
+const isTemplatesRoute = computed(() => route.path.includes('/service/agents/templates'))
+
+const createModalOpen = ref(false)
+const selectedClassForCreate = ref('')
+const initialDataForCreate = ref<Record<string, unknown> | null>(null)
+
+const workflowModalOpen = ref(false)
+const selectedGroupForWorkflow = ref<AgentGroup | null>(null)
+
+const openWorkflowModal = (group: AgentGroup) => {
+  selectedGroupForWorkflow.value = group
+  workflowModalOpen.value = true
+}
+
+const openCreateModal = (agentClass: string) => {
+  selectedClassForCreate.value = agentClass
+  initialDataForCreate.value = null
+  createModalOpen.value = true
+}
+
+const handleClone = (agent: FullAgentInstanceDto) => {
+  selectedClassForCreate.value = agent.agent_class
+  initialDataForCreate.value = agent.configuration ?? null
+  createModalOpen.value = true
+}
+
+const groupedAgents = computed<AgentGroup[]>(() => {
+  const groups = new Map<string, AgentGroup>()
+
+  const localeKey = locale.value as 'de' | 'en' | 'fr' | 'it'
+
+  // First, add all available agent classes (even those without instances)
+  if (agentClasses.value) {
+    for (const classInfo of agentClasses.value) {
+      groups.set(classInfo.agent_class, {
+        agentClass: classInfo.agent_class,
+        name: classInfo.name?.[localeKey] ?? classInfo.agent_class,
+        description: classInfo.description?.[localeKey] ?? '',
+        icon: classInfo.icon ?? 'meteor-icons:robot',
+        instances: [],
+        isAvailable: true,
+        networkGraph: classInfo.network_graph ?? null,
+      })
+    }
+  }
+
+  // Then, add instances to their groups (or create groups for unavailable classes)
+  if (agentInstances.value) {
+    for (const agent of agentInstances.value) {
+      const existing = groups.get(agent.agent_class)
+      if (existing) {
+        existing.instances.push(agent)
+      }
+      else {
+        groups.set(agent.agent_class, {
+          agentClass: agent.agent_class,
+          name: agent.agent_class,
+          description: '',
+          icon: 'meteor-icons:robot',
+          instances: [agent],
+          isAvailable: false,
+          networkGraph: agent.network_graph ?? null,
+        })
+      }
+    }
+  }
+
+  return Array.from(groups.values())
+    .sort((a, b) => a.agentClass.localeCompare(b.agentClass))
+})
+
+const toAgent = (agent: FullAgentInstanceDto) => {
+  router.push(tenantPath(`/service/agents/${agent.agent_class}-${agent.agent_id}/overview`))
+}
+
+const handleCreateSuccess = (agentClass: string, agentId: string) => {
+  router.push(tenantPath(`/service/agents/${agentClass}-${agentId}/overview`))
+}
+</script>

package/pages/[tenant]/service/datasets/[dataset_id].vue

@@ -0,0 +1,81 @@
+<template>
+  <StructuralColumn
+    :title="dataset?.dataset_name"
+    close-route="/service/datasets"
+    :loading="datasetIsLoading"
+  >
+    <ConfirmPopup />
+    <div class="flex flex-col gap-3">
+      <EvaluationDatasetEdit v-model="editableDataset" />
+      <Button
+        v-if="changedItems.length > 0"
+        class="w-full"
+        :label="t('evaluation.dataset.save_button')"
+        icon="pi pi-save"
+        @click="safeDataset($event)"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import { cloneDeep } from 'lodash-es'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { useI18n } from 'vue-i18n'
+
+import type { Dataset, DatasetItem, DatasetItemCreate } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const { dataset, datasetIsLoading } = useDataset()
+const editableDataset = ref<Dataset | null>(null)
+
+watch(dataset, (newServerData) => {
+  if (newServerData) {
+    editableDataset.value = cloneDeep(newServerData)
+  }
+}, { immediate: true })
+
+const confirm = useConfirm()
+const toast = useToast()
+
+const { updateDataset } = useUpdateDataset()
+const { tenantId } = useTenant()
+
+const changedItems = computed<DatasetItemCreate[]>(() => {
+  return editableDataset.value.items
+    .filter((item: DatasetItem) => {
+      return !item.id || item.id.startsWith('tmp')
+    })
+    .map((item: DatasetItem) => {
+      return {
+        question: item.question,
+        answer: item.answer,
+      }
+    })
+})
+
+const safeDataset = (event) => {
+  confirm.require({
+    target: event.currentTarget,
+    message: t('evaluation.dataset.save_confirmation'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: t('evaluation.dataset.cancel_button'),
+      severity: 'secondary',
+      outlined: true,
+    },
+    acceptProps: {
+      label: t('evaluation.dataset.save_action'),
+    },
+    accept: async () => {
+      const items = changedItems.value
+      if (items.length > 0) {
+        await updateDataset({ dataset: { items }, tenantId: tenantId.value! })
+        toast.add({ severity: 'success', summary: t('evaluation.dataset.saved_summary'), detail: t('evaluation.dataset.saved_detail'), life: 3000 })
+      }
+    },
+  })
+}
+</script>

package/pages/[tenant]/service/datasets.vue

@@ -0,0 +1,53 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('evaluation.dataset.title')"
+      :loading="datasetsAreLoading"
+    >
+      <div class="flex flex-col gap-2">
+        <div class="flex w-full justify-end">
+          <Button
+            :label="t('evaluation.dataset.create_new')"
+            icon="pi pi-plus"
+            @click="createModalOpen = true"
+          />
+          <Dialog
+            v-model:visible="createModalOpen"
+            modal
+            :header="t('evaluation.dataset.create_new')"
+          >
+            <EvaluationDatasetCreate
+              @close="createModalOpen = false"
+            />
+          </Dialog>
+        </div>
+        <div
+          class="grid grid-cols-2 gap-4 xl:grid-cols-2"
+        >
+          <EvaluationDatasetCard
+            v-for="dataset in datasets"
+            :key="dataset.id"
+            :dataset="dataset"
+            :langfuse-dataset-url="dataset.langfuse_url"
+            @click="() => toDataset(dataset)"
+          />
+        </div>
+      </div>
+    </StructuralColumn>
+
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const { datasets, datasetsAreLoading } = useDatasets()
+const createModalOpen = ref(false)
+
+const toDataset = (dataset: { id: string }) => {
+  router.push(tenantPath(`/service/datasets/${dataset.id}`))
+}
+</script>

package/pages/[tenant]/service/health/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>{{ JSON.stringify({ status: 'ok' }) }}</div>
+</template>

package/pages/[tenant]/service/knowledge/[db]/[namespace]/[document_id]/nodes.vue

@@ -0,0 +1,20 @@
+<template>
+  <StructuralColumn
+    :title="t('knowledge.nodes.title')"
+    :close-route="`/service/knowledge/${route.params.db}/${route.params.namespace}`"
+    :loading="nodesAreLoading"
+  >
+    <KnowledgeNodeContent
+      v-for="node in nodes"
+      :key="node.id"
+      :node="node"
+    />
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { nodes, nodesAreLoading } = useNodes()
+
+const { t } = useI18n()
+const route = useRoute()
+</script>

package/pages/[tenant]/service/knowledge/[db]/[namespace]/[document_id]/overview.vue

@@ -0,0 +1,40 @@
+<template>
+  <StructuralColumn
+    :title="document?.document_title"
+    :close-route="`/service/knowledge/${route.params.db}/${route.params.namespace}`"
+    :loading="documentIsLoading"
+  >
+    <div class="mt-16 rounded-3xl border border-surface-100 p-9 shadow-lg dark:border-surface-800">
+      <KnowledgeDocumentOverview :document="document">
+        <MarkdownRenderer
+          :md="md"
+        />
+      </KnowledgeDocumentOverview>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { document, documentIsLoading } = useDocument()
+const route = useRoute()
+
+const md = computed<string>(() => {
+  if (documentIsLoading.value) {
+    return ''
+  }
+
+  const content = document.value?.content
+  if (!content) {
+    return ''
+  }
+
+  return content
+    // Replace our custom <figure>-tags surrounding our images
+    .replace(/(?:<|&lt;)figure(?:>|&gt;)/g, '::MarkdownFigure\n')
+    .replace(/(?:<|&lt;)\/figure(?:>|&gt;)/g, '\n::')
+
+    // Replace our custom <table>-tag surrounding our tables
+    .replace(/(?:<|&lt;)table(?:>|&gt;)/g, '::MarkdownTable\n')
+    .replace(/(?:<|&lt;)\/table(?:>|&gt;)/g, '\n::')
+})
+</script>

package/pages/[tenant]/service/knowledge/[db]/[namespace]/[document_id]/summary.vue

@@ -0,0 +1,88 @@
+<template>
+  <StructuralColumn
+    :title="t('knowledge.summary.title')"
+    :close-route="`/service/knowledge/${route.params.db}/${route.params.namespace}`"
+    :loading="summaryNodesAreLoading"
+  >
+    <div class="flex flex-col gap-16">
+      <Tabs :value="1">
+        <TabList>
+          <Tab
+            v-for="summary in summaryNodes"
+            :key="summary.level"
+            :value="summary.level"
+          >
+            {{ t('knowledge.summary.level') }} {{ summary.level }}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel
+            v-for="summary in summaryNodes"
+            :key="summary.level"
+            :value="summary.level"
+          >
+            <div v-if="summary.nodes.length > 0">
+              <div
+                v-for="(node, nodeIndex) in summary.nodes"
+                :key="node.id"
+              >
+                <div
+                  v-for="i in 6"
+                  :key="i"
+                >
+                  <Component
+                    :is="`h${i}`"
+                    v-if="node[`h${i}`] && (nodeIndex === 0 || node[`h${i}`] !== summary.nodes[nodeIndex-1][`h${i}`])"
+                    class="pl-2"
+                  >
+                    {{ node[`h${i}`] }}
+                  </Component>
+                </div>
+                <KnowledgeNodeContent
+                  :node="node"
+                />
+              </div>
+            </div>
+            <div v-else>
+              {{ t("knowledge.summary.no_summaries_at_level") }}
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import { useSummaryNodes } from '@core/composables/document/useSummaryNodes'
+
+const { t } = useI18n()
+const route = useRoute()
+const { summaryNodes, summaryNodesAreLoading } = useSummaryNodes()
+</script>
+
+<style scoped>
+h1 {
+  @apply mt-4 text-xl font-bold before:content-['#'] before:pr-1 before:text-gray-400;
+}
+
+h2 {
+  @apply mt-4 text-lg font-bold before:content-['##'] before:pr-1 before:text-gray-400;
+}
+
+h3 {
+  @apply mt-4 text-base font-bold before:content-['###'] before:pr-1 before:text-gray-400;;
+}
+
+h4 {
+  @apply mt-3 font-bold before:content-['####'] before:pr-1 before:text-gray-400;;
+}
+
+h5 {
+  @apply mt-2 font-bold before:content-['#####'] before:pr-1 before:text-gray-400;;
+}
+
+h6 {
+  @apply mt-2 font-bold before:content-['######'] before:pr-1 before:text-gray-400;;
+}
+</style>

package/pages/[tenant]/service/knowledge/[db]/[namespace]/[document_id].vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <SelectButton
+      v-if="navItems"
+      :model-value="activeNavItem"
+      :options="navItems"
+      data-key="key"
+      option-label="name"
+      size="small"
+      @update:model-value="toNavItem"
+    />
+    <NuxtPage />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@core/types/NavItem'
+
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const subPath = (path: string) => {
+  return `/service/knowledge/${route.params.db}/${route.params.namespace}/${route.params.document_id}/${path}`
+}
+
+const isActive = (path: string) => {
+  return () => {
+    const localizedPath = tenantPath(subPath(path))
+    return route.path.startsWith(localizedPath)
+  }
+}
+
+const navItems = computed<NavItem[]>(() => [
+  { name: t('knowledge.navigation.document.basic'), key: 'basic', path: subPath('overview'), isActive: isActive('overview') },
+  { name: t('knowledge.navigation.document.nodes'), key: 'nodes', path: subPath('nodes'), isActive: isActive('nodes') },
+  { name: t('knowledge.navigation.document.summary'), key: 'summary', path: subPath('summary'), isActive: isActive('summary') },
+])
+
+const toNavItem = (navItem: NavItem) => {
+  router.push(tenantPath(navItem.path))
+}
+
+const activeNavItem = computed<NavItem | undefined>(() => {
+  return navItems.value?.find(navItem => navItem.isActive())
+})
+</script>