@swiss-ai-hub/web 0.290.11

package/pages/[tenant]/service/processes/[process_class]-[process_id]/start.vue

@@ -0,0 +1,26 @@
+<template>
+  <StructuralColumn
+    :title="processInstance?.process_config.name"
+    close-route="/service/processes"
+    :loading="processInstanceIsLoading"
+    size="large"
+  >
+    <div class="flex flex-col gap-12">
+      <ProcessStarts
+        :human-inputs="startInputs"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import type { HumanInSpecsReadable } from '@core/sdk/client'
+
+const { processInstance, processInstanceIsLoading } = useProcessInstance()
+
+const startInputs = computed<HumanInSpecsReadable[]>(() => {
+  return processInstance.value?.human_inputs?.filter((input: HumanInSpecsReadable) => {
+    return input.is_process_start
+  })
+})
+</script>

package/pages/[tenant]/service/processes/[process_class]-[process_id]/walkthroughs/[process_walkthrough_id]/overview.vue

@@ -0,0 +1,14 @@
+<template>
+  <StructuralColumn
+    :title="t('thread.events.title')"
+    :close-route="`/service/processes/${route.params.process_class}-${route.params.process_id}/walkthroughs`"
+    :loading="false"
+  >
+    <p>This is overview</p>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+</script>

package/pages/[tenant]/service/processes/[process_class]-[process_id]/walkthroughs.vue

@@ -0,0 +1,54 @@
+<template>
+  <StructuralSubstructure>
+    <StructuralColumn
+      :title="t('process.title')"
+      :loading="isLoading"
+    >
+      <ProcessWalkthroughList
+        :walkthroughs="walkthroughs"
+        @selected="toWalkthrough"
+      />
+
+      <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>
+    </StructuralColumn>
+    <NuxtPage />
+  </StructuralSubstructure>
+</template>
+
+<script setup lang="ts">
+import { useProcessWalkthroughs } from '@core/composables/process/useProcessWalkthroughs'
+
+import type { ProcessWalkthroughDto } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const {
+  walkthroughs,
+  isLoading,
+  pagination,
+  currentPage,
+  pageSize,
+  setPage,
+  setPageSize,
+} = useProcessWalkthroughs()
+
+const toWalkthrough = (walkthrough: ProcessWalkthroughDto) => {
+  router.push(tenantPath(`/service/processes/${walkthrough.process_class}-${walkthrough.process_id}/walkthroughs/${walkthrough.process_walkthrough_id}/overview`))
+}
+
+const onPageChange = (event) => {
+  setPageSize(event.rows)
+  const newPage = Math.floor(event.first / event.rows) + 1
+  setPage(newPage)
+}
+</script>

package/pages/[tenant]/service/processes/[process_class]-[process_id].vue

@@ -0,0 +1,60 @@
+<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 { processInstance } = useProcessInstance()
+
+const subPath = (path: string) => {
+  return `/service/processes/${route.params.process_class}-${route.params.process_id}/${path}`
+}
+
+const isActive = (path: string) => {
+  return () => {
+    const localizedPath = tenantPath(subPath(path))
+    return route.path.startsWith(localizedPath)
+  }
+}
+
+const hasConfigForm = computed(() => {
+  return processInstance.value?.form && processInstance.value.form.length > 0
+})
+
+const navItems = computed<NavItem[]>(() => {
+  const items: NavItem[] = [
+    { name: t('process.navigation.overview'), key: 'overview', path: subPath('overview'), isActive: isActive('overview') },
+    { name: t('process.navigation.walkthroughs'), key: 'walkthroughs', path: subPath('walkthroughs'), isActive: isActive('walkthroughs') },
+    { name: t('process.navigation.start'), key: 'start', path: subPath('start'), isActive: isActive('start') },
+  ]
+  if (hasConfigForm.value) {
+    items.push({ name: t('process.navigation.configuration'), key: 'configuration', path: subPath('configuration'), isActive: isActive('configuration') })
+  }
+  return items
+})
+
+const toNavItem = (navItem: NavItem) => {
+  router.push(tenantPath(navItem.path))
+}
+
+const activeNavItem = computed<NavItem | undefined>(() => {
+  return navItems.value?.filter(navItem => navItem.isActive())[0]
+})
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('process.title')"
+      :loading="isLoading"
+    >
+      <div class="flex flex-col gap-12">
+        <div
+          v-for="group in groupedProcesses"
+          :key="group.processClass"
+        >
+          <div class="flex items-center gap-2 pb-2 pl-2">
+            <Icon
+              :name="group.icon"
+              size="1.25em"
+              class="text-surface-500"
+            />
+            <span class="text-sm font-medium">{{ group.name }}</span>
+            <span
+              v-if="group.description"
+              class="text-xs text-surface-500"
+            >
+              — {{ group.description }}
+            </span>
+          </div>
+          <div class="grid grid-cols-2 gap-4 2xl:grid-cols-2">
+            <ProcessCard
+              v-for="process in group.instances"
+              :key="`${process.process_class}-${process.process_id}`"
+              :process="process"
+              @click="() => toProcess(process)"
+            />
+            <ProcessEmptyCard
+              v-if="group.isAvailable"
+              @add="openCreateModal(group.processClass)"
+            />
+          </div>
+        </div>
+      </div>
+      <ProcessCreateModal
+        v-model="createModalOpen"
+        :initial-class="selectedClassForCreate"
+        @success="handleCreateSuccess"
+      />
+    </StructuralColumn>
+
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import type { FullProcessInstanceDtoReadable } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t, locale } = useI18n()
+
+const { processInstances, processInstancesAreLoading } = useProcessInstances()
+const { processClasses, processClassesAreLoading } = useProcessClasses()
+
+const isLoading = computed(() => processInstancesAreLoading.value || processClassesAreLoading.value)
+
+const createModalOpen = ref(false)
+const selectedClassForCreate = ref('')
+
+const openCreateModal = (processClass: string) => {
+  selectedClassForCreate.value = processClass
+  createModalOpen.value = true
+}
+
+const groupedProcesses = computed(() => {
+  const groups = new Map<string, {
+    processClass: string
+    name: string
+    description: string
+    icon: string
+    instances: FullProcessInstanceDtoReadable[]
+    isAvailable: boolean
+  }>()
+
+  const localeKey = locale.value as 'de' | 'en' | 'fr' | 'it'
+
+  // First, add all available process classes (even those without instances)
+  if (processClasses.value) {
+    for (const classInfo of processClasses.value) {
+      groups.set(classInfo.process_class, {
+        processClass: classInfo.process_class,
+        name: classInfo.name?.[localeKey] ?? classInfo.process_class,
+        description: classInfo.description?.[localeKey] ?? '',
+        icon: classInfo.icon ?? 'carbon:ibm-event-processing',
+        instances: [],
+        isAvailable: true,
+      })
+    }
+  }
+
+  // Then, add instances to their groups (or create groups for unavailable classes)
+  if (processInstances.value) {
+    for (const process of processInstances.value) {
+      const existing = groups.get(process.process_class)
+      if (existing) {
+        existing.instances.push(process)
+      }
+      else {
+        // Class not available - create group but mark as unavailable
+        groups.set(process.process_class, {
+          processClass: process.process_class,
+          name: process.process_class,
+          description: '',
+          icon: 'carbon:ibm-event-processing',
+          instances: [process],
+          isAvailable: false,
+        })
+      }
+    }
+  }
+
+  return Array.from(groups.values())
+    .sort((a, b) => a.processClass.localeCompare(b.processClass))
+})
+
+const toProcess = (process: FullProcessInstanceDtoReadable) => {
+  router.push(tenantPath(`/service/processes/${process.process_class}-${process.process_id}/overview`))
+}
+
+const handleCreateSuccess = (processClass: string, processId: string) => {
+  router.push(tenantPath(`/service/processes/${processClass}-${processId}/overview`))
+}
+</script>

package/pages/[tenant]/service/roles/[role_id].vue

@@ -0,0 +1,54 @@
+<template>
+  <StructuralColumn
+    :title="role?.name"
+    close-route="/service/roles"
+    :loading="roleIsLoading"
+    size="small"
+  >
+    <div class="flex flex-col gap-4">
+      <RoleEdit
+        v-model="clonedRole"
+      />
+      <div class="flex justify-end">
+        <Button
+          type="button"
+          :label="t('role.save_button')"
+          icon="pi pi-save"
+          :disabled="!clonedRole.name || !clonedRole.description || !clonedRole.access_rules?.length"
+          @click="saveRole"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import { useUpdateRole } from '@core/composables/role/useUpdateRole'
+import { cloneDeep } from 'lodash-es'
+
+import type { CreateRoleRequest, RoleResponse } from '@core/sdk/client'
+
+const { role, roleIsLoading } = useRole()
+const { t } = useI18n()
+const toast = useToast()
+
+const { updateRole } = useUpdateRole()
+const { tenantId } = useTenant()
+
+const clonedRole = ref<CreateRoleRequest>({
+  name: '',
+  description: '',
+  access_rules: [],
+})
+watch(role, (newRole: RoleResponse) => {
+  if (!newRole) {
+    return
+  }
+  clonedRole.value = cloneDeep(newRole)
+})
+
+const saveRole = async () => {
+  await updateRole({ roleId: role.value.id, updatedRole: clonedRole.value, tenantId: tenantId.value! })
+  toast.add({ severity: 'success', summary: t('role.role_saved.summary'), detail: t('role.role_saved.detail'), life: 3000 })
+}
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('role.title')"
+      :loading="rolesAreLoading"
+    >
+      <div class="grid grid-cols-2 gap-4 2xl:grid-cols-2">
+        <RoleCard
+          v-for="role in roles"
+          :key="role.id"
+          :role="role"
+          @click="() => toRole(role)"
+          @delete="confirmDeleteRole"
+        />
+        <div
+          class="flex min-h-full 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="createModalOpen = true"
+        >
+          <div class="flex items-center justify-center">
+            <div class="flex items-center justify-center p-3">
+              <i
+                class="pi pi-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('role.create_new') }}
+            </h3>
+          </div>
+        </div>
+        <Dialog
+          v-model:visible="createModalOpen"
+          modal
+          :header="t('role.create_new')"
+        >
+          <RoleCreate
+            @close="createModalOpen = false"
+          />
+        </Dialog>
+      </div>
+    </StructuralColumn>
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { RoleResponse } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+const confirm = useConfirm()
+const toast = useToast()
+
+const { tenantId } = useTenant()
+const { roles, rolesAreLoading } = useRoles()
+const { deleteRole } = useDeleteRole()
+
+const createModalOpen = ref(false)
+
+const toRole = (role: RoleResponse) => {
+  router.push(tenantPath(`/service/roles/${role.id}`))
+}
+
+const confirmDeleteRole = (role: RoleResponse) => {
+  confirm.require({
+    message: t('role.remove_dialog.explanation'),
+    header: t('role.remove_dialog.confirm'),
+    icon: 'pi pi-exclamation-triangle',
+    position: 'bottom',
+    rejectProps: { label: t('role.remove_dialog.cancel'), severity: 'secondary', outlined: true },
+    acceptProps: { label: t('role.remove_dialog.proceed'), severity: 'danger' },
+    accept: async () => {
+      await router.push(tenantPath('/service/roles'))
+      await deleteRole({ roleId: role.id, tenantId: tenantId.value! })
+      toast.add({ severity: 'success', summary: t('role.role_deleted.summary'), detail: t('role.role_deleted.detail'), life: 3000 })
+    },
+  })
+}
+</script>

package/pages/[tenant]/service/threads/[thread_id]/chat.vue

@@ -0,0 +1,51 @@
+<template>
+  <StructuralColumn
+    :title="t('thread.chat.title')"
+    close-route="/service/threads"
+    :loading="threadIsLoading || threadEventsAreLoading"
+  >
+    <ChatThread
+      :events="threadEvents"
+      :thread="thread"
+    />
+    <div class="pt-16">
+      <Textarea
+        v-model="userInput"
+        class="w-full"
+        auto-resize
+        rows="5"
+        cols="30"
+      />
+      <Button
+        label="Send new Message"
+        class="w-full"
+        @click="submitMessage"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const { thread, threadIsLoading } = useThread()
+const { threadEvents, threadEventsAreLoading } = useThreadEvents()
+const { tenantId } = useTenant()
+const { t } = useI18n()
+
+const { sendMessages } = useChatCompletions()
+
+const userInput = ref('')
+
+const submitMessage = async () => {
+  const agent = thread.value?.agents?.at(0)
+  const agentIdentifier = `${agent?.agent_class}/${agent?.agent_id}`
+  sendMessages({
+    model: agentIdentifier,
+    messages: [{ role: 'user', content: userInput.value }],
+    threadId: route.params.thread_id as string,
+    tenantId: tenantId.value!,
+  })
+  userInput.value = ''
+}
+</script>

package/pages/[tenant]/service/threads/[thread_id]/display/[display_id].vue

@@ -0,0 +1,21 @@
+<template>
+  <StructuralColumn
+    :title="t('thread.events.title')"
+    :close-route="`/service/threads/${route.params.thread_id}/display`"
+    :loading="threadIsLoading || threadEventsAreLoading"
+  >
+    <EventList
+      :thread="thread"
+      :events="threadEvents"
+      :display-id="route.params.display_id"
+    />
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { thread, threadIsLoading } = useThread()
+const { threadEvents, threadEventsAreLoading } = useThreadEvents()
+
+const route = useRoute()
+const { t } = useI18n()
+</script>

package/pages/[tenant]/service/threads/[thread_id]/display.vue

@@ -0,0 +1,29 @@
+<template>
+  <StructuralSubstructure>
+    <StructuralColumn
+      :title="t('thread.display.title')"
+      close-route="/service/threads"
+      :loading="threadIsLoading"
+    >
+      <DisplayList
+        :displays="thread.displays"
+        @selected="toDisplay"
+      />
+    </StructuralColumn>
+    <NuxtPage />
+  </StructuralSubstructure>
+</template>
+
+<script setup lang="ts">
+import type { DisplayStatistics } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const { thread, threadIsLoading } = useThread()
+
+const toDisplay = (display: DisplayStatistics) => {
+  router.push(tenantPath(`/service/threads/${thread.value.id}/display/${display.display_id}`))
+}
+</script>

package/pages/[tenant]/service/threads/[thread_id]/hierarchy.vue

@@ -0,0 +1,14 @@
+<template>
+  <StructuralColumn
+    :title="t('thread.hierarchy.title')"
+    close-route="/service/threads"
+    :loading="threadIsLoading"
+  >
+    <ThreadHierarchy :thread="thread" />
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { thread, threadIsLoading } = useThread()
+const { t } = useI18n()
+</script>

package/pages/[tenant]/service/threads/[thread_id]/memories/[memory_id].vue

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

package/pages/[tenant]/service/threads/[thread_id]/memories.vue

@@ -0,0 +1,19 @@
+<template>
+  <MemoryManagementPage
+    translation-prefix="thread"
+    :context-name="thread?.name ?? ''"
+    :context-loading="threadIsLoading"
+    :memory-context="{
+      type: 'user',
+      thread_id: route.params.thread_id as string,
+    }"
+    :base-path="`/service/threads/${route.params.thread_id}/memories`"
+  />
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+// Get thread info
+const { thread, threadIsLoading } = useThread()
+</script>

package/pages/[tenant]/service/threads/[thread_id]/overview.vue

@@ -0,0 +1,100 @@
+<template>
+  <StructuralColumn
+    :title="thread?.name"
+    close-route="/service/threads"
+    :loading="threadIsLoading"
+    size="large"
+  >
+    <div class="flex flex-col gap-12">
+      <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('event.list.firstInteraction') }}
+            </span>
+            <Tag
+              :value="firstInteraction"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('event.list.lastInteraction') }}
+            </span>
+            <Tag
+              :value="lastInteraction"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('event.list.duration') }}
+            </span>
+            <Tag
+              :value="duration"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('event.list.costs') }}
+            </span>
+            <Tag
+              :value="thread.llm_cost.toFixed(6) + 'CHF'"
+              severity="secondary"
+            />
+          </div>
+        </div>
+      </Panel>
+      <ThreadInfo
+        :thread="thread"
+      />
+      <EventStatistics
+        v-model="timeRange"
+        :charts="charts"
+      />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from 'date-fns'
+import { de } from 'date-fns/locale/de'
+import { enUS } from 'date-fns/locale/en-US'
+import { frCH } from 'date-fns/locale/fr-CH'
+import { itCH } from 'date-fns/locale/it-CH'
+
+const { thread, threadIsLoading } = useThread()
+const { timeRange, charts } = useBasicEventStatistics()
+const { locale, t } = useI18n()
+
+const firstInteraction = computed<string>(() => {
+  return useDateFormat(new Date(thread.value?.first_interaction), 'DD.MM.YYYY HH:mm:ss')
+})
+
+const lastInteraction = computed<string>(() => {
+  return useDateFormat(new Date(thread.value?.latest_interaction), 'DD.MM.YYYY HH:mm:ss')
+})
+
+const duration = computed<string>(() => {
+  const duration = intervalToDuration({
+    start: new Date(thread.value?.first_interaction),
+    end: new Date(thread.value?.latest_interaction),
+  })
+  if (duration.minutes || duration.hours || duration.days) {
+    duration.seconds = 0
+  }
+  if (duration.days || duration.weeks) {
+    duration.minutes = 0
+  }
+  return formatDuration(duration, { locale: { de, en: enUS, fr: frCH, it: itCH }[locale.value as 'de' | 'en' | 'fr' | 'it'] })
+})
+</script>
+
+<style scoped>
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>