@swiss-ai-hub/web 0.290.11

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

@@ -0,0 +1,54 @@
+<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 subPath = (path: string) => {
+  return `/service/threads/${route.params.thread_id}/${path}`
+}
+
+const isActive = (path: string) => {
+  return () => {
+    const localizedPath = tenantPath(subPath(path))
+    return route.path.startsWith(localizedPath)
+  }
+}
+
+const navItems = computed<NavItem[]>(() => {
+  return [
+    { name: t('thread.navigation.basic'), key: 'basic', path: subPath('overview'), isActive: isActive('overview') },
+    { name: t('thread.navigation.hierarchy'), key: 'hierarchy', path: subPath('hierarchy'), isActive: isActive('hierarchy') },
+    { name: t('thread.navigation.chat'), key: 'chat', path: subPath('chat'), isActive: isActive('chat') },
+    { name: t('thread.navigation.display'), key: 'display', path: subPath('display'), isActive: isActive('display') },
+    { name: t('thread.navigation.memories'), key: 'memories', path: subPath('memories'), isActive: isActive('memories') },
+  ]
+})
+
+const toNavItem = (navItem: NavItem) => {
+  router.push(tenantPath(navItem.path))
+}
+
+const activeNavItem = computed<NavItem | undefined>(() => {
+  return navItems.value?.find(navItem => navItem.isActive())
+})
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('thread.title')"
+      :loading="isLoading"
+    >
+      <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>
+    </StructuralColumn>
+    <NuxtPage />
+  </StructuralScreen>
+</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,
+} = useThreads()
+
+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/user-memories/graph.vue

@@ -0,0 +1,97 @@
+<template>
+  <StructuralColumn
+    :title="t('memory.graph.title')"
+    :loading="memoriesAreLoading"
+    class="overflow-hidden"
+  >
+    <div class="flex h-full flex-col gap-2">
+      <div class="flex w-full items-center gap-2">
+        <IconField class="flex-1">
+          <InputIcon>
+            <i class="pi pi-search" />
+          </InputIcon>
+          <InputText
+            v-model="searchInput"
+            :placeholder="t('memory.search.placeholder')"
+            class="w-full"
+            @keyup.enter="handleSearch"
+          />
+        </IconField>
+        <Button
+          icon="pi pi-search"
+          :label="t('memory.search.button')"
+          :loading="isSearchButtonLoading"
+          @click="handleSearch"
+        />
+        <Button
+          v-if="isSearchActive"
+          icon="pi pi-times"
+          severity="secondary"
+          :label="t('memory.search.clear')"
+          @click="handleClearSearch"
+        />
+      </div>
+
+      <div class="flex-1">
+        <MemoryGraph
+          :relations="allRelations"
+          :selected-memory-id="selectedMemoryId"
+          :highlighted-relations="isSearchActive ? searchData?.relations : undefined"
+          @select-node="handleSelectNode"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+
+  <NuxtPage :selected-memory-id="selectedMemoryId" />
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+
+// Create user memory composables using factory
+const { useMemories, useMemorySearch } = createMemoryComposables({
+  type: 'user',
+})
+
+const {
+  paginatedMemories,
+  allRelations,
+  memoriesAreLoading,
+} = useMemories()
+
+const {
+  searchData,
+  searchIsLoading,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+} = useMemorySearch()
+
+// Use shared search filter composable
+const {
+  searchInput,
+  isSearchButtonLoading,
+  handleSearch,
+  handleClearSearch,
+} = useMemorySearchFilter({
+  searchData,
+  paginatedMemories,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+  searchIsLoading,
+})
+
+const selectedMemoryId = computed(() => route.params.memory_id as string | undefined)
+
+const handleSelectNode = (nodeId: string) => {
+  const memory = paginatedMemories.value.find(m => m.id === nodeId)
+  if (memory) {
+    router.push(tenantPath(`/service/user-memories/graph/${memory.id}`))
+  }
+}
+</script>

package/pages/[tenant]/service/user-memories/list/[memory_id].vue

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

package/pages/[tenant]/service/user-memories/list.vue

@@ -0,0 +1,150 @@
+<template>
+  <StructuralColumn
+    :title="t('memory.list.title')"
+    :loading="memoriesAreLoading"
+  >
+    <div class="flex h-full flex-col gap-2">
+      <div class="flex w-full items-center justify-between gap-2">
+        <div class="flex flex-1 items-center gap-2">
+          <IconField class="flex-1">
+            <InputIcon>
+              <i class="pi pi-search" />
+            </InputIcon>
+            <InputText
+              v-model="searchInput"
+              :placeholder="t('memory.search.placeholder')"
+              class="w-full"
+              @keyup.enter="handleSearch"
+            />
+          </IconField>
+          <Button
+            icon="pi pi-search"
+            :label="t('memory.search.button')"
+            :loading="isSearchButtonLoading"
+            @click="handleSearch"
+          />
+          <Button
+            v-if="isSearchActive"
+            icon="pi pi-times"
+            severity="secondary"
+            :label="t('memory.search.clear')"
+            @click="handleClearSearch"
+          />
+        </div>
+        <Button
+          v-tooltip.top="t('memory.delete_all.button')"
+          icon="pi pi-trash"
+          severity="danger"
+          text
+          rounded
+          @click="handleDeleteAll"
+        />
+      </div>
+
+      <div class="flex-1">
+        <MemoryList
+          :memories="displayedMemories"
+          :current-page="displayedCurrentPage"
+          :total-pages="displayedTotalPages"
+          :selected-memory-id="selectedMemoryId"
+          @select-memory="handleSelectMemory"
+          @next-page="nextPage"
+          @prev-page="prevPage"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+
+  <NuxtPage :selected-memory-id="selectedMemoryId" />
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const confirm = useConfirm()
+const toast = useToast()
+
+// Create user memory composables using factory
+const { useMemories, useMemorySearch, useDeleteMemory } = createMemoryComposables({
+  type: 'user',
+})
+
+const {
+  paginatedMemories,
+  currentPage,
+  totalPages,
+  memoriesAreLoading,
+  nextPage,
+  prevPage,
+} = useMemories()
+
+const {
+  searchData,
+  searchIsLoading,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+} = useMemorySearch()
+
+const { deleteAllMemories } = useDeleteMemory()
+
+// Use shared search filter composable
+const {
+  searchInput,
+  isSearchButtonLoading,
+  displayedMemories,
+  displayedCurrentPage,
+  displayedTotalPages,
+  handleSearch,
+  handleClearSearch,
+} = useMemorySearchFilter({
+  searchData,
+  paginatedMemories,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+  searchIsLoading,
+  currentPage,
+  totalPages,
+})
+
+const selectedMemoryId = computed(() => route.params.memory_id as string | undefined)
+
+const handleSelectMemory = (memory: { id: string }) => {
+  router.push(tenantPath(`/service/user-memories/list/${memory.id}?q=${searchInput.value ?? ''}`))
+}
+
+const handleDeleteAll = () => {
+  confirm.require({
+    message: t('memory.delete_all.confirm_message'),
+    header: t('memory.delete_all.confirm_header'),
+    icon: 'pi pi-exclamation-triangle',
+    acceptClass: 'p-button-danger',
+    accept: async () => {
+      try {
+        await deleteAllMemories()
+        toast.add({
+          severity: 'success',
+          summary: t('memory.delete_all.success.title'),
+          detail: t('memory.delete_all.success.message'),
+          life: 3000,
+        })
+      }
+      catch (error) {
+        console.error('Failed to delete all memories:', error)
+        toast.add({
+          severity: 'error',
+          summary: t('memory.delete_all.error.title'),
+          detail: t('memory.delete_all.error.message'),
+          life: 5000,
+        })
+      }
+    },
+  })
+}
+</script>

package/pages/[tenant]/service/user-memories.vue

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

package/pages/[tenant]/service/users/[user_id].vue

@@ -0,0 +1,117 @@
+<template>
+  <StructuralColumn
+    :title="user?.name"
+    close-route="/service/users"
+    :loading="userIsLoading"
+  >
+    <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('user.list.name') }}
+            </span>
+            <Tag
+              :value="user.name"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('user.list.email') }}
+            </span>
+            <Tag
+              :value="user.email"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('user.list.sys_admin') }}
+            </span>
+            <Tag
+              v-if="user.is_sys_admin"
+              :value="t('user.list.sys_admin_tag')"
+              severity="success"
+              icon="pi pi-crown"
+            />
+            <Tag
+              v-else
+              :value="t('user.list.sys_admin_no')"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('user.list.roles') }}
+            </span>
+            <div class="flex flex-wrap gap-2">
+              <Badge
+                v-for="role in user.roles"
+                :key="role"
+                :value="role"
+              />
+            </div>
+          </div>
+        </div>
+      </Panel>
+      <div class="flex flex-col gap-8">
+        <div class="flex flex-col gap-3">
+          <h3 class="text-2xl">
+            Services
+          </h3>
+          <div class="flex flex-wrap gap-2">
+            <Tag
+              v-for="service in user.access.services"
+              :key="service.name"
+              v-tooltip.top="service.level === 2 ? 'Admin' : 'User'"
+              :value="service.name"
+              :icon="service.level === 2 ? 'pi pi-crown' : undefined"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <h3 class="text-2xl">
+            Agents
+          </h3>
+          <div class="flex flex-wrap gap-2">
+            <Tag
+              v-for="agent in user.access.agents"
+              :key="agent.name"
+              v-tooltip.top="agent.level === 2 ? 'Admin' : 'User'"
+              :value="agent.name"
+              :icon="agent.level === 2 ? 'pi pi-crown' : undefined"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <h3 class="text-2xl">
+            {{ t('process.title') }}
+          </h3>
+          <div class="flex flex-wrap gap-2">
+            <Tag
+              v-for="process in user.access.processes"
+              :key="process.name"
+              v-tooltip.top="process.level === 2 ? 'Admin' : 'User'"
+              :value="process.name"
+              :icon="process.level === 2 ? 'pi pi-crown' : undefined"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { user, userIsLoading } = useUser()
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('user.title')"
+      :loading="usersAreLoading"
+    >
+      <UserList
+        :users="users"
+        :available-roles="roles ?? []"
+        @selected="toUser"
+        @assign="onAssign"
+        @revoke="onRevoke"
+      />
+
+      <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 />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import type { UserDto } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+const { tenantId } = useTenant()
+const toast = useToast()
+
+const {
+  users,
+  usersAreLoading,
+  pagination,
+  currentPage,
+  pageSize,
+  setPage,
+  setPageSize,
+} = useUsers()
+const { roles } = useRoles()
+const { assignRole } = useAssignRoleToUser()
+const { revokeRole } = useRevokeRoleFromUser()
+
+const toUser = (user: UserDto) => {
+  router.push(tenantPath(`/service/users/${user.id}`))
+}
+
+const onPageChange = (event) => {
+  setPageSize(event.rows)
+  const newPage = Math.floor(event.first / event.rows) + 1
+  setPage(newPage)
+}
+
+const onAssign = async ({ user, roleName }: { user: UserDto, roleName: string }) => {
+  try {
+    await assignRole({ tenantId: tenantId.value!, userId: user.id, roleName })
+    toast.add({
+      severity: 'success',
+      summary: t('user.role_chips.assigned_toast', { role: roleName, user: user.name }),
+      life: 3000,
+    })
+  }
+  catch (error) {
+    console.error('Failed to assign role', error)
+  }
+}
+
+const onRevoke = async ({ user, roleName }: { user: UserDto, roleName: string }) => {
+  try {
+    await revokeRole({ tenantId: tenantId.value!, userId: user.id, roleName })
+    toast.add({
+      severity: 'success',
+      summary: t('user.role_chips.revoked_toast', { role: roleName, user: user.name }),
+      life: 3000,
+    })
+  }
+  catch (error) {
+    console.error('Failed to revoke role', error)
+  }
+}
+</script>

package/pages/auth/callback.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-zinc-900 text-white">
+    <div
+      v-if="loading"
+      class="text-center"
+    >
+      <h1 class="mb-4 text-2xl">
+        {{ t('auth.callback.loggingIn') }}
+      </h1>
+      <div class="mx-auto size-12 animate-spin rounded-full border-y-2 border-white" />
+    </div>
+
+    <div
+      v-else-if="error"
+      class="text-center"
+    >
+      <h1 class="mb-4 text-2xl text-red-500">
+        {{ t('auth.callback.loginError') }}
+      </h1>
+      <p>{{ error }}</p>
+      <p class="mt-4">
+        {{ t('auth.callback.redirectingToLogin') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { $auth } = useNuxtApp()
+const error = ref(null)
+const loading = ref(true)
+
+definePageMeta({
+  layout: 'anonymous',
+})
+
+const { t, locale } = useI18n()
+
+try {
+  await $auth.signinRedirectCallback()
+  navigateTo('/')
+}
+catch (err) {
+  error.value = err.message || t('auth.callback.genericError')
+  setTimeout(() => {
+    navigateTo(`/${locale.value}/auth/login`)
+  }, 3000)
+}
+finally {
+  loading.value = false
+}
+</script>

package/pages/auth/login.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="flex h-screen flex-col md:flex-row">
+    <div class="order-2 flex h-3/5 w-full items-center justify-center bg-neutral-950 p-10 text-4xl text-surface-300 md:order-1 md:h-auto md:w-3/5">
+      <span>{{ t('auth.login.tagline') }}</span>
+    </div>
+
+    <!-- Right Panel: Login -->
+    <div class="order-1 flex h-2/5 w-full flex-col items-center justify-between bg-zinc-900 p-6 md:order-2 md:h-full md:w-2/5">
+      <div />
+      <div class="flex flex-col items-center gap-8">
+        <a
+          href="https://ai-hub.bbv.ch"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            :src="logo"
+            :alt="t('auth.login.logoAlt')"
+            class="w-32 rounded lg:w-32"
+          >
+        </a>
+        <div class="flex flex-col gap-2 text-center">
+          <h2 class="text-xl text-white">
+            {{ t('auth.login.welcome', { companyName }) }}
+          </h2>
+          <p class="text-surface-400">
+            {{ t('auth.login.pleaseLogin') }}
+          </p>
+        </div>
+        <div class="flex flex-col gap-3">
+          <ProgressSpinner
+            v-if="isLoading"
+            class="!h-8 !w-8"
+          />
+          <template v-else>
+            <Button
+              v-for="idp in authProviders ?? []"
+              :key="idp.alias"
+              :label="t('auth.login.loginWith', { provider: idp.display_name })"
+              :icon="`pi ${idp.icon}`"
+              icon-pos="right"
+              class="!bg-white !text-black"
+              @click="login(idp.alias || undefined)"
+            />
+            <Button
+              v-if="(authProviders?.length ?? 0) === 0"
+              :label="t('auth.login.title')"
+              icon="pi pi-sign-in"
+              icon-pos="right"
+              class="!bg-white !text-black"
+              @click="login()"
+            />
+          </template>
+        </div>
+      </div>
+      <a
+        href="https://bbv.ch/services/generative-ai/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hidden text-surface-400 sm:block"
+      >
+        {{ t('auth.login.customSolutions') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import logo from '@core/assets/images/logo.png'
+
+definePageMeta({
+  layout: 'anonymous',
+})
+
+const { t } = useI18n()
+const { login } = useAuth()
+const { authProviders, isLoading } = useAuthProviders()
+
+const companyName = 'bbv Software Services AG'
+</script>