@swiss-ai-hub/web 0.290.11

package/pages/[tenant]/notifications/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('notification.title')"
+      :loading="isLoading"
+    >
+      <DataView
+        :value="notifications"
+        paginator
+        :rows="pageSize"
+        :total-records="totalRecords"
+        :first="(currentPage - 1) * pageSize"
+        lazy
+        @page="onPage"
+      >
+        <template #header>
+          <div class="flex flex-col justify-between gap-4 sm:flex-row">
+            <div class="flex flex-wrap items-center gap-2">
+              <Checkbox
+                v-model="selectAll"
+                :binary="true"
+                :aria-label="t('notification.select_all')"
+                :disabled="!hasNotifications"
+              />
+              <Button
+                :label="t('notification.mark_as_read')"
+                icon="pi pi-eye"
+                severity="secondary"
+                size="small"
+                :disabled="!canMarkSelectedAsRead"
+                @click="markSelectedAsRead"
+              />
+              <Button
+                :label="t('notification.mark_as_done')"
+                icon="pi pi-check"
+                severity="secondary"
+                size="small"
+                :disabled="!canMarkSelectedAsDone"
+                @click="markSelectedAsDone"
+              />
+              <Button
+                v-if="hasSelectedNotifications"
+                :label="t('notification.clear_selection')"
+                icon="pi pi-times"
+                severity="secondary"
+                size="small"
+                text
+                @click="clearSelection"
+              />
+            </div>
+            <div class="flex gap-2">
+              <SelectButton
+                v-model="activeFilter"
+                :options="filterOptions"
+                option-label="label"
+                option-value="value"
+                :allow-empty="false"
+                :aria-label="t('notification.filter_notifications')"
+              />
+            </div>
+          </div>
+        </template>
+
+        <template #list="{ items }">
+          <ul class="m-0 flex list-none flex-col p-0">
+            <NotificationItem
+              v-for="item in items"
+              :key="item.id"
+              :notification="item"
+              :is-selected="isSelected(item)"
+              :show-checkbox="true"
+              @click="handleNotificationClick(item)"
+              @toggle-selection="toggleSelection"
+            />
+          </ul>
+        </template>
+
+        <template #empty>
+          <div class="flex flex-col items-center justify-center p-8 text-center">
+            <i class="pi pi-bell-slash p-4 text-xl opacity-70" />
+            <p class="text-sm font-light opacity-70">
+              {{ getEmptyStateTitle() }}
+            </p>
+          </div>
+        </template>
+      </DataView>
+    </StructuralColumn>
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import type { NotificationDto } from '@core/sdk/client'
+
+const { t } = useI18n()
+const router = useRouter()
+const tenantPath = useTenantPath()
+
+const selectedNotifications = ref<NotificationDto[]>([])
+const currentPage = ref(1)
+const pageSize = ref(8)
+
+const readFilter = ref<boolean | undefined>(false)
+const doneFilter = ref<boolean | undefined>(undefined)
+
+const filterOptions = computed(() => [
+  { label: t('notification.filter.unread'), value: 'unread' },
+  { label: t('notification.filter.not_done'), value: 'not_done' },
+  { label: t('notification.filter.all'), value: 'all' },
+])
+
+const activeFilter = ref('not_done')
+
+const {
+  notifications,
+  isLoading,
+  totalRecords,
+} = useNotifications({
+  currentPage,
+  pageSize,
+  filters: {
+    read: readFilter,
+    done: doneFilter,
+  },
+})
+
+watch(() => activeFilter.value, (newPreset) => {
+  const filterMap = {
+    not_done: { read: undefined, done: false },
+    all: { read: undefined, done: undefined },
+    unread: { read: false, done: undefined },
+  }
+
+  const filters = filterMap[newPreset]
+  readFilter.value = filters.read
+  doneFilter.value = filters.done
+
+  currentPage.value = 1
+  selectedNotifications.value = []
+}, { immediate: true })
+
+const { mutate: updateNotification } = useUpdateNotification()
+const { mutate: updateMultipleNotifications } = useUpdateMultipleNotifications()
+
+const hasNotifications = computed(() => notifications.value.length > 0)
+
+const hasSelectedNotifications = computed(() => selectedNotifications.value.length > 0)
+
+const canMarkSelectedAsRead = computed(() =>
+  hasSelectedNotifications.value
+  && selectedNotifications.value.some(n => !n.read),
+)
+
+const canMarkSelectedAsDone = computed(() =>
+  hasSelectedNotifications.value
+  && selectedNotifications.value.some(n => !n.done),
+)
+
+const selectAll = computed({
+  get: () => hasNotifications.value && selectedNotifications.value.length === notifications.value.length,
+  set: (value: boolean) => {
+    selectedNotifications.value = value ? [...notifications.value] : []
+  },
+})
+
+const onPage = (event: { page: number, rows: number }) => {
+  currentPage.value = event.page + 1
+  pageSize.value = event.rows
+  selectedNotifications.value = []
+}
+
+const clearSelection = () => {
+  selectedNotifications.value = []
+}
+
+const getEmptyStateTitle = computed(() => {
+  const titles = {
+    all: t('notification.no_notifications'),
+    not_done: t('notification.no_pending_notifications'),
+    unread: t('notification.no_unread_notifications'),
+  } as const
+
+  return titles[activeFilter.value as keyof typeof titles] || titles.all
+})
+
+const handleNotificationClick = async (notification: NotificationDto) => {
+  if (!notification.read) {
+    await updateNotification({
+      id: notification.id,
+      payload: ref({ read: true }),
+    })
+  }
+  if (!notification.link) return
+  await nextTick()
+  router.push(tenantPath(notification.link))
+}
+
+const markSelectedAsRead = async () => {
+  if (!canMarkSelectedAsRead.value) return
+  const idsToUpdate = selectedNotifications.value.map(n => n.id)
+
+  updateMultipleNotifications({
+    ids: idsToUpdate,
+    payload: ref({ read: true }),
+  })
+  selectedNotifications.value = []
+}
+
+const markSelectedAsDone = async () => {
+  if (!canMarkSelectedAsDone.value) return
+  const idsToUpdate = selectedNotifications.value.map(n => n.id)
+
+  updateMultipleNotifications({
+    ids: idsToUpdate,
+    payload: ref({ done: true, read: true }),
+  })
+  selectedNotifications.value = []
+}
+
+const isSelected = (item: NotificationDto) => {
+  return selectedNotifications.value.some(selected => selected.id === item.id)
+}
+
+const toggleSelection = (item: NotificationDto) => {
+  if (isSelected(item)) {
+    selectedNotifications.value = selectedNotifications.value.filter(selected => selected.id !== item.id)
+  }
+  else {
+    selectedNotifications.value.push(item)
+  }
+}
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/chat.vue

@@ -0,0 +1,67 @@
+<template>
+  <StructuralColumn
+    :title="t('agent.chat.title')"
+    close-route="/service/agents"
+  >
+    <div class="relative flex flex-col gap-2 p-3">
+      <div>
+        <div />
+        <div>
+          <Textarea
+            v-model="userInput"
+            class="w-full"
+            auto-resize
+            rows="5"
+            cols="30"
+            :placeholder="t('agent.chat.placeholder')"
+            @keydown.enter="submitMessage"
+          />
+          <Button
+            :label="t('agent.chat.createThreadAndSend')"
+            class="w-full"
+            :disabled="!userInput"
+            @click="submitMessage"
+          />
+        </div>
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import type { CreateThreadRequest } from '@core/sdk/client'
+
+const userInput = ref<string>('')
+
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { tenantId } = useTenant()
+const { t } = useI18n()
+
+const { myUser } = useMyUser()
+
+const { sendMessages } = useChatCompletions()
+const { createNewThread } = useThreadUtils()
+
+const submitMessage = async () => {
+  const thread = await createNewThread.mutateAsync({
+    name: t('agent.chat.manuallyCreatedThread'),
+    user_ids: [myUser.value.id],
+    agents: [{
+      agent_id: route.params.agent_id as string,
+      agent_class: route.params.agent_class as string,
+    }],
+    tenantId: tenantId.value!,
+  } satisfies CreateThreadRequest & { tenantId: string })
+  const agentIdentifier = `${route.params.agent_class}/${route.params.agent_id}`
+  sendMessages({
+    model: agentIdentifier,
+    messages: [{ role: 'user', content: userInput.value }],
+    threadId: thread.id,
+    tenantId: tenantId.value!,
+  })
+  userInput.value = ''
+  router.push(tenantPath(`/service/threads/${thread.id}/chat`))
+}
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/configuration.vue

@@ -0,0 +1,122 @@
+<template>
+  <StructuralColumn
+    :title="t('agent.configuration.title')"
+    close-route="/service/agents"
+    :loading="agentInstanceIsLoading"
+    size="normal"
+  >
+    <div class="flex flex-col gap-3">
+      <p class="mb-4 text-sm text-surface-500 dark:text-surface-400">
+        {{ t('agent.configuration.description') }}
+      </p>
+      <AgentConfiguration
+        v-if="configForm && configForm.length > 0 && !agentInstanceIsLoading"
+        :title="t('agent.configuration.runtimeSettings')"
+        :description="agentInstance?.agent_config.description || ''"
+        :form="configForm"
+        :initial-data="configurationData"
+        @submit="submitConfiguration"
+      />
+      <div
+        v-else-if="agentInstanceIsLoading"
+        class="text-center text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('common.loading') }}
+      </div>
+      <div
+        v-else
+        class="text-center text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('agent.configuration.noConfiguration') }}
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import type { AgentConfigDtoReadable } from '@core/sdk/client'
+
+type FormElement = NonNullable<AgentConfigDtoReadable['form']>[number]
+
+const route = useRoute()
+const { tenantId } = useTenant()
+const { agentInstance, agentInstanceIsLoading } = useAgentInstance()
+const { updateAgentInstance } = useUpdateAgentInstance()
+const { t } = useI18n()
+const toast = useToast()
+
+const configForm = computed(() => agentInstance.value?.agent_config?.form || [])
+
+/**
+ * Recursively initializes nested Group values with empty objects based on form schema.
+ * FormKit Groups require object values - they cannot be null or undefined.
+ * This ensures all Group elements have at least an empty object as their value.
+ */
+const initializeGroupData = (
+  formElements: FormElement[],
+  data: Record<string, unknown>,
+): Record<string, unknown> => {
+  const result = { ...data }
+
+  for (const element of formElements) {
+    const elementRecord = element as Record<string, unknown>
+    const formkitType = elementRecord.formkit || elementRecord.$formkit
+
+    if (formkitType === 'group') {
+      const name = elementRecord.name as string
+      const children = elementRecord.children as FormElement[] | undefined
+
+      if (result[name] === null || result[name] === undefined) {
+        result[name] = {}
+      }
+
+      if (children && Array.isArray(children)) {
+        result[name] = initializeGroupData(children, result[name] as Record<string, unknown>)
+      }
+    }
+  }
+
+  return result
+}
+
+const configurationData = computed(() => {
+  const rawData = (agentInstance.value?.configuration || {}) as Record<string, unknown>
+  return initializeGroupData(configForm.value, rawData)
+})
+
+const submitConfiguration = async (formData: Record<string, unknown>) => {
+  const agentClass = route.params.agent_class as string
+  const agentId = route.params.agent_id as string
+
+  if (!tenantId.value) {
+    toast.add({
+      severity: 'error',
+      summary: t('agent.configuration.saveError'),
+      life: 5000,
+    })
+    return
+  }
+
+  try {
+    await updateAgentInstance({
+      agentClass,
+      agentId,
+      tenantId: tenantId.value,
+      configuration: formData,
+    })
+    toast.add({
+      severity: 'success',
+      summary: t('agent.configuration.saveSuccess'),
+      life: 3000,
+    })
+  }
+  catch (error) {
+    console.error('Failed to save agent configuration:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('agent.configuration.saveError'),
+      life: 5000,
+    })
+  }
+}
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/memories/[memory_id].vue

@@ -0,0 +1,3 @@
+<template>
+  <MemoryDetailPage memory-type="user" />
+</template>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/memories.vue

@@ -0,0 +1,20 @@
+<template>
+  <MemoryManagementPage
+    translation-prefix="agent"
+    :context-name="agentInstance?.agent_config.name ?? ''"
+    :context-loading="agentInstanceIsLoading"
+    :memory-context="{
+      type: 'user',
+      agent_class: route.params.agent_class as string,
+      agent_id: route.params.agent_id as string,
+    }"
+    :base-path="`/service/agents/${route.params.agent_class}-${route.params.agent_id}/memories`"
+    hide-agent-column
+  />
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const { agentInstance, agentInstanceIsLoading } = useAgentInstance()
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/overview.vue

@@ -0,0 +1,72 @@
+<template>
+  <StructuralColumn
+    :title="agentInstance?.agent_config.name"
+    close-route="/service/agents"
+    :loading="agentInstanceIsLoading"
+    size="large"
+  >
+    <div class="flex flex-col gap-12">
+      <span class="mb-4 block text-sm text-surface-500 dark:text-surface-400">
+        {{ agentInstance.agent_config.description }}
+      </span>
+      <Panel
+        class="panel pt-5"
+      >
+        <div class="grid grid-cols-2 gap-4 xl:grid-cols-4">
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('agent.overview.name') }}
+            </span>
+            <Tag
+              :value="agentInstance.agent_config.name"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('agent.overview.class') }}
+            </span>
+            <Tag
+              :value="agentInstance.agent_class"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('agent.overview.agentId') }}
+            </span>
+            <Tag
+              :value="agentInstance.agent_id"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('agent.overview.status') }}
+            </span>
+            <Tag
+              :value="agentInstance.is_online ? t('agent.overview.online') : t('agent.overview.offline')"
+              :severity="agentInstance.is_online ? 'success' : 'error' "
+            />
+          </div>
+        </div>
+      </Panel>
+      <EventStatistics
+        v-model="timeRange"
+        :charts="charts"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { agentInstance, agentInstanceIsLoading } = useAgentInstance()
+const { t } = useI18n()
+const { timeRange, charts } = useBasicEventStatistics()
+</script>
+
+<style scoped>
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/threads.vue

@@ -0,0 +1,52 @@
+<template>
+  <StructuralColumn
+    :title="t('agent.threads.title')"
+    close-route="/service/agents"
+    :loading="isLoading"
+  >
+    <div class="p-3">
+      <ThreadList
+        :threads="threads"
+        @selected="toThread"
+      />
+
+      <div class="mt-4">
+        <Paginator
+          :rows="pageSize"
+          :total-records="pagination.total"
+          :rows-per-page-options="[10, 20, 30, 50]"
+          :first="(currentPage - 1) * pageSize"
+          @page="onPageChange"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const {
+  threads,
+  isLoading,
+  pagination,
+  currentPage,
+  pageSize,
+  setPage,
+  setPageSize,
+} = useAgentInstanceThreads()
+
+const toThread = (thread: ThreadDto) => {
+  router.push(tenantPath(`/service/threads/${thread.id}/overview`))
+}
+
+const onPageChange = (event) => {
+  setPageSize(event.rows)
+  const newPage = Math.floor(event.first / event.rows) + 1
+  setPage(newPage)
+}
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/workflow.vue

@@ -0,0 +1,19 @@
+<template>
+  <StructuralColumn
+    :title="t('agent.workflow.title')"
+    close-route="/service/agents"
+    :loading="agentInstanceIsLoading"
+  >
+    <div class="h-[900px] w-full">
+      <WorkflowVisualization
+        v-if="agentInstance && agentInstance.network_graph"
+        :graph-data="agentInstance.network_graph"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { agentInstance, agentInstanceIsLoading } = useAgentInstance()
+const { t } = useI18n()
+</script>

package/pages/[tenant]/service/agents/[agent_class]-[agent_id].vue

@@ -0,0 +1,63 @@
+<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"
+    />
+    <div class="flex gap-8">
+      <NuxtPage />
+    </div>
+  </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 { agentInstance } = useAgentInstance()
+
+const subPath = (path: string) => {
+  return `/service/agents/${route.params.agent_class}-${route.params.agent_id}/${path}`
+}
+
+const isActive = (path: string) => {
+  return () => {
+    const localizedPath = tenantPath(subPath(path))
+    return route.path.startsWith(localizedPath)
+  }
+}
+
+const navItems = computed<NavItem[]>(() => {
+  const items: NavItem[] = [
+    { name: t('agent.navigation.basic'), key: 'basic', path: subPath('overview'), isActive: isActive('overview') },
+    { name: t('agent.navigation.configuration'), key: 'configuration', path: subPath('configuration'), isActive: isActive('configuration') },
+    { name: t('agent.navigation.workflow'), key: 'workflow', path: subPath('workflow'), isActive: isActive('workflow') },
+    { name: t('agent.navigation.threads'), key: 'threads', path: subPath('threads'), isActive: isActive('threads') },
+    { name: t('agent.navigation.memories'), key: 'memories', path: subPath('memories'), isActive: isActive('memories') },
+  ]
+  if (agentInstance.value?.is_conversational) {
+    items.push({ name: t('agent.navigation.chat'), key: 'chat', path: subPath('chat'), isActive: isActive('chat') },
+    )
+  }
+  return items
+})
+
+const toNavItem = (navItem: NavItem | null) => {
+  if (navItem) {
+    router.push(tenantPath(navItem.path))
+  }
+}
+
+const activeNavItem = computed<NavItem | undefined>(() => {
+  return navItems.value?.find(navItem => navItem.isActive())
+})
+</script>