@swiss-ai-hub/web 0.290.11

package/components/Service/Selection.vue

@@ -0,0 +1,148 @@
+<template>
+  <Button
+    aria-label="Menu"
+    variant="text"
+    @click="toggle"
+  >
+    <template #icon>
+      <Icon
+        name="mage:dots-menu"
+        size="xl"
+      />
+    </template>
+  </Button>
+  <Popover
+    ref="op"
+    class="[--p-popover-background:#f9f9f9] [--p-popover-border-color:#e3e3e3] dark:[--p-popover-background:#0d0d0d] dark:[--p-popover-border-color:#333]"
+  >
+    <div
+      v-focustrap
+      class="flex flex-col gap-4 p-5"
+    >
+      <div>
+        <h2 class="text-xl">
+          {{ t('service.selection.title') }}
+        </h2>
+        <p class="text-sm">
+          {{ t('service.selection.description') }}
+        </p>
+      </div>
+      <IconField>
+        <InputIcon>
+          <i class="pi pi-search" />
+        </InputIcon>
+        <InputText
+          id="input"
+          v-model="search"
+          size="small"
+          type="text"
+          :placeholder="t('service.selection.search')"
+          autofocus
+          fluid
+          @keydown.enter="onEnter"
+        />
+      </IconField>
+    </div>
+    <div class="relative grid grid-cols-4 gap-3 p-5">
+      <template v-if="appsLoading">
+        <skeleton
+          v-for="i in 6"
+          :key="i"
+          width="5rem"
+          height="5rem"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <div
+          v-for="app in shownApps"
+          :key="app.path"
+          :class="[
+            'rounded-2xl border  p-3 transition-colors hover:border-primary-500 dark:border-primary-900  hover:dark:border-primary-400',
+            isActiveApp(app.path)
+              ? 'bg-surface-200 dark:bg-surface-800'
+              : 'bg-surface-100 dark:bg-surface-900',
+          ]"
+        >
+          <NuxtLink
+            :to="app.path === '/' ? tenantPath('/') : tenantPath(app.path)"
+            class="flex h-[50px] items-center justify-center"
+            @click="toggle"
+          >
+            <div class="flex h-[60px] min-w-[80px] flex-col items-center justify-center gap-2">
+              <Icon
+                :name="app.icon"
+                class="size-6"
+              />
+              <p
+                :class="[
+                  'text-sm font-medium',
+                ]"
+              >
+                {{ app.label }}
+              </p>
+            </div>
+          </NuxtLink>
+        </div>
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="px-3"
+        >
+          <div class="h-0 min-w-[80px]" />
+        </div>
+      </template>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+
+const { apps, appsLoading } = useApps()
+const { t } = useI18n()
+
+const shownApps = computed(() => {
+  return search.value
+    ? apps.value.filter((app: MenuItem) => {
+        const label = typeof app.label === 'string'
+          ? app.label
+          : ''
+        return label.toLowerCase().includes(search.value.toLowerCase())
+      })
+    : apps.value
+})
+
+const isActiveApp = (appPath: string | undefined) => {
+  if (!appPath) return false
+  const localizedPath = tenantPath(appPath)
+  // For home page, only match exact path
+  if (appPath === '/') {
+    return route.path === localizedPath
+  }
+  // For other pages, match exact or nested routes
+  return route.path === localizedPath || route.path.startsWith(localizedPath + '/')
+}
+
+const search = ref('')
+watch(() => route.path, () => {
+  search.value = ''
+})
+
+const op = ref()
+const toggle = (event: Event) => {
+  op.value.toggle(event)
+}
+
+const onEnter = (event: Event) => {
+  if (shownApps.value.length > 0) {
+    router.push(tenantPath(shownApps.value[0].path))
+    toggle(event)
+  }
+}
+</script>

package/components/Structural/Column.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="relative flex flex-col gap-3 max-2xl:w-full">
+    <div
+      :class="[
+        'overflow-hidden rounded-3xl bg-white dark:bg-surface-900 max-2xl:w-full max-2xl:max-w-full',
+        sizeClass,
+      ]"
+    >
+      <ProgressBar
+        v-if="loading"
+        mode="indeterminate"
+        style="height: 2px"
+      />
+      <div
+        v-else
+        class="h-[2px] w-full"
+      />
+      <div
+        v-if="loading === undefined || loading === false"
+        class="p-6"
+      >
+        <div class="flex items-center justify-between font-bold">
+          <h2
+            v-if="!childColumn"
+            class="text-2xl"
+          >
+            {{ title }}
+          </h2>
+          <h3
+            v-else
+            class="text-xl"
+          >
+            {{ title }}
+          </h3>
+          <i
+            v-if="closeRoute"
+            class="pi pi-times cursor-pointer text-xl"
+            @click="close"
+          />
+        </div>
+        <Divider />
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  title: string
+  closeRoute?: string
+  size?: 'small' | 'normal' | 'large'
+  loading?: boolean
+  childColumn?: boolean
+}>(), {
+  size: 'normal',
+  loading: false,
+  childColumn: false,
+})
+
+const sizeClass = computed<string>(() => {
+  return {
+    small: '2xl:w-[680px]',
+    normal: '2xl:w-[920px]',
+    large: '2xl:w-[1440px]',
+  }[props.size]
+})
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const close = () => {
+  router.push(tenantPath(props.closeRoute))
+}
+</script>

package/components/Structural/Screen.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex h-[calc(100vh-50px)] w-full flex-col justify-start gap-2 overflow-auto bg-surface-50 dark:bg-surface-950">
+    <div class="px-8 pt-8">
+      <slot name="top" />
+    </div>
+    <div class="flex flex-col justify-start gap-8 px-8 2xl:flex-row">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/Structural/Substructure.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex w-full flex-col justify-start gap-8 overflow-auto bg-surface-50 dark:bg-surface-950 2xl:flex-row">
+    <slot />
+  </div>
+</template>

package/components/Tenant/Switcher.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex items-center gap-2">
+    <button
+      v-tooltip.bottom="{ value: t('tenant.switcher_label') }"
+      class="flex max-w-48 items-center gap-1.5 rounded px-2 py-1 text-sm text-surface-600 transition-colors dark:text-surface-300"
+      :class="hasMultipleTenants || isSysAdmin ? 'cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800' : 'cursor-default'"
+      :disabled="!hasMultipleTenants && !isSysAdmin"
+      :aria-label="t('tenant.switcher_label')"
+      @click="toggle"
+    >
+      <i class="pi pi-building shrink-0 text-xs" />
+      <span class="truncate">{{ currentTenantDisplayName }}</span>
+      <i
+        v-if="hasMultipleTenants || isSysAdmin"
+        class="pi pi-chevron-down shrink-0 text-xs opacity-60"
+      />
+    </button>
+
+    <Popover ref="popoverRef">
+      <div class="flex w-64 flex-col gap-2 p-2">
+        <p class="text-sm font-bold text-muted-color">
+          {{ t('tenant.switcher_label') }}
+        </p>
+        <div
+          v-for="tenant in tenants"
+          :key="tenant.id"
+          class="cursor-pointer rounded-md px-3 py-2 transition-colors hover:bg-surface-100 dark:hover:bg-surface-700"
+          :class="{ 'bg-primary/10 font-semibold': tenant.id === tenantId }"
+          @click="onSelect(tenant)"
+        >
+          <p class="text-sm">
+            {{ tenant.name }}
+          </p>
+          <p
+            v-if="tenant.description"
+            class="text-xs text-muted-color"
+          >
+            {{ tenant.description }}
+          </p>
+        </div>
+
+        <div
+          v-if="isSysAdmin"
+          class="border-t border-surface-200 pt-2 dark:border-surface-700"
+        >
+          <div
+            class="flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-surface-100 dark:hover:bg-surface-700"
+            @click="enterSysAdmin"
+          >
+            <i class="pi pi-cog text-xs text-primary" />
+            <p class="text-sm">
+              {{ t('tenant.administration_title') }}
+            </p>
+          </div>
+        </div>
+
+        <p
+          v-if="!tenants?.length && !tenantsAreLoading"
+          class="text-sm text-muted-color"
+        >
+          {{ t('tenant.no_tenant_description') }}
+        </p>
+        <ProgressSpinner
+          v-if="tenantsAreLoading"
+          style="width: 1.5rem; height: 1.5rem"
+        />
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+
+import type { TenantMembershipDto } from '@core/sdk/client'
+
+const { t } = useI18n()
+const { tenantId, setTenant } = useTenant()
+const { tenants, tenantsAreLoading, isSysAdmin } = useTenantMemberships()
+const { enterSysadmin } = useSysadminNavigation()
+
+const hasMultipleTenants = computed(() => (tenants.value?.length ?? 0) > 1)
+const currentTenantDisplayName = computed(() => {
+  const current = tenants.value?.find(t => t.id === tenantId.value)
+  return current?.name ?? tenantId.value ?? ''
+})
+const popoverRef = ref<InstanceType<typeof Popover>>()
+
+function toggle(event: Event) {
+  popoverRef.value?.toggle(event)
+}
+
+async function onSelect(tenant: TenantMembershipDto) {
+  popoverRef.value?.hide()
+  await setTenant(tenant.id)
+}
+
+function enterSysAdmin() {
+  popoverRef.value?.hide()
+  enterSysadmin()
+}
+</script>

package/components/Thread/Details.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <Tabs
+      v-model:value="activeDisplayId"
+      scrollable
+    >
+      <TabList>
+        <Tab
+          v-for="display in thread.displays"
+          :key="display.display_id"
+          :value="display.display_id"
+        >
+          {{ displayNameFn(display) }}
+          <i
+            v-if="display.has_errors"
+            class="pi pi-exclamation-triangle text-red-500"
+          />
+          <i
+            v-if="display.has_pending"
+            class="pi pi-exclamation-triangle text-yellow-500"
+          />
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel
+          v-for="display in thread.displays"
+          :key="display.display_id"
+          :value="display.display_id"
+        >
+          <div class="flex flex-col gap-12 pt-4">
+            <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="formattedDate(display.started_at)"
+                    severity="secondary"
+                  />
+                </div>
+                <div class="flex flex-col items-start gap-2">
+                  <span class="font-semibold">
+                    {{ t('event.list.lastInteraction') }}
+                  </span>
+                  <Tag
+                    :value="formattedDate(display.ended_at)"
+                    severity="secondary"
+                  />
+                </div>
+                <div class="flex flex-col items-start gap-2">
+                  <span class="font-semibold">
+                    {{ t('event.list.pending') }}
+                  </span>
+                  <Tag
+                    v-if="display.has_pending"
+                    severity="warn"
+                    :value="pendingType(display)"
+                  />
+                  <Tag
+                    v-else
+                    severity="success"
+                    :value="t('event.list.no')"
+                  />
+                </div>
+                <div class="flex flex-col items-start gap-2">
+                  <span class="font-semibold">
+                    {{ t('event.list.status') }}
+                  </span>
+                  <Tag
+                    v-if="display.has_errors"
+                    severity="danger"
+                    :value="t('event.list.error')"
+                  />
+                  <Tag
+                    v-else
+                    severity="success"
+                    :value="t('event.list.successful')"
+                  />
+                </div>
+              </div>
+            </Panel>
+            <EventList
+              :events="events"
+              :thread="thread"
+              :display-id="activeDisplayId"
+              :show-chat="showChat"
+            />
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+
+import type {
+  DisplayStatistics,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  events: ContextualizedAgentEvent[]
+  thread: ThreadDto
+  displayId?: string
+  showChat?: boolean
+}>(), {
+  showChat: false,
+})
+
+const { pendingType } = useThreadUtils()
+const { t } = useI18n()
+
+const activeDisplayId = ref(props.thread.displays?.at(-1)?.display_id)
+
+watch(() => props.displayId, (newDisplayId) => {
+  activeDisplayId.value = newDisplayId
+})
+
+const displayNameFn = (display: DisplayStatistics) => format(new Date(display.started_at), 'dd.MM.yyyy HH:mm')
+const formattedDate = (datestr: string) => useDateFormat(new Date(datestr), 'DD.MM.YYYY HH:mm:ss')
+</script>
+
+<style scoped>
+.customized-timeline :deep(.p-timeline-event-opposite){
+  width: 60px;
+  max-width: 60px;
+}
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>

package/components/Thread/Hierarchy.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="hierarchy w-full overflow-x-auto">
+    <OrganizationChart
+      :value="chartData"
+      collapsible
+      :selection-mode="'single'"
+      @node-select="toNode"
+    >
+      <template #thread="{ node }">
+        <span>{{ node.data.name }}</span>
+      </template>
+
+      <template #display="{ node }">
+        <div class="flex flex-col gap-2">
+          <Tag
+            :value="formattedDate(node.data.started_at)"
+            severity="secondary"
+          />
+          <Badge :value="node.data.duration + 's'" />
+        </div>
+      </template>
+
+      <template #run="{ node }">
+        <div class="flex flex-col gap-2">
+          <AgentAvatar :agent="node.data.agent" />
+          <Tag
+            v-if="node.data.has_pending"
+            severity="warn"
+            :value="pendingType(node.data)"
+          />
+          <Tag
+            v-else
+            severity="success"
+            value="Completed"
+          />
+          <Tag
+            v-if="node.data.has_errors"
+            severity="danger"
+            value="Error"
+          />
+          <Tag
+            v-else
+            severity="success"
+            value="No Errors"
+          />
+        </div>
+      </template>
+    </OrganizationChart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import OrganizationChart, { type OrganizationChartNode } from 'primevue/organizationchart'
+import { computed } from 'vue'
+
+import type { ThreadDto, DisplayStatistics, RunStatistics } from '@core/sdk/client'
+
+// Define the props
+const props = defineProps<{
+  thread: ThreadDto
+}>()
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { pendingType } = useThreadUtils()
+
+const toNode = (node: OrganizationChartNode) => {
+  let displayId: string | undefined
+  if (node.data.display_id) {
+    displayId = node.data.display_id
+  }
+  if (node.data.run_id) {
+    const display = props.thread.displays?.find((display: DisplayStatistics) => {
+      return display?.runs?.some((run: RunStatistics) => run.run_id === node.data.run_id)
+    })
+    displayId = display?.display_id
+  }
+  if (displayId) {
+    router.push(tenantPath(`/service/threads/${props.thread.id}/display/${displayId}`))
+  }
+  else {
+    router.push(tenantPath(`/service/threads/${props.thread.id}/display`))
+  }
+}
+
+const formattedDate = (datestr: string) => format(new Date(datestr), 'yyyy.MM.dd HH:mm')
+
+// Computed property to transform ThreadDto into OrganizationChart data structure
+const chartData = computed<OrganizationChartNode>(() => {
+  if (!props.thread) return {} as OrganizationChartNode
+
+  // Function to transform RunStatistics
+  const mapRun = (run: RunStatistics): OrganizationChartNode => ({
+    key: run.run_id,
+    type: 'run',
+    data: run,
+    children: [],
+  })
+
+  // Function to transform DisplayStatistics
+  const mapDisplay = (display: DisplayStatistics): OrganizationChartNode => ({
+    key: display.display_id,
+    type: 'display',
+    data: display,
+    children: (display.runs ?? []).map(mapRun),
+  })
+
+  // Transform the main thread data
+  const rootNode: OrganizationChartNode = {
+    key: props.thread.id,
+    type: 'thread',
+    data: props.thread,
+    children: (props.thread.displays ?? []).map(mapDisplay),
+  }
+  return rootNode
+})
+</script>
+
+<style scoped>
+/* Add some basic styling for better readability */
+.hierarchy :deep(.p-organizationchart-node-content) {
+  padding: 0;
+  border: none;
+}
+
+.hierarchy :deep(.p-organizationchart-line-down) {
+  background-color: #adb5bd; /* primevue gray-400 */
+}
+.hierarchy :deep(.p-organizationchart-line-left) {
+  border-right: 1px solid #adb5bd;
+}
+.hierarchy :deep(.p-organizationchart-line-top) {
+  border-top: 1px solid #adb5bd;
+}
+</style>

package/components/Thread/Info.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="flex flex-col gap-3"
+  >
+    <div class="flex w-full">
+      <div class="flex w-1/2 flex-col gap-2">
+        <h3 class="font-bold">
+          {{ t('thread.users') }}
+        </h3>
+        <UserAvatar
+          v-for="user in users"
+          :key="user.id"
+          :user="user"
+        />
+      </div>
+      <div class="flex w-1/2 flex-col gap-2">
+        <h3 class="font-bold">
+          {{ t('thread.assistants') }}
+        </h3>
+        <AgentAvatar
+          v-for="agent in agents"
+          :key="agent.agent_class + agent.agent_id"
+          :agent="agent"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MinimalAgentInstanceDto, ThreadDto, MinimalUserDto } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  thread: ThreadDto
+}>()
+
+const users = computed<MinimalUserDto[]>(() => props.thread.users ?? [])
+const agents = computed<MinimalAgentInstanceDto[]>(() => props.thread.agents ?? [])
+</script>