@swiss-ai-hub/web 0.290.11

package/components/Thread/List.vue

@@ -0,0 +1,136 @@
+<template>
+  <DataTable
+    :value="threads"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    :selection="selectedThread"
+    size="small"
+    @update:selection="emit('selected', $event)"
+  >
+    <Column
+      field="name"
+      :header="t('thread.list.name')"
+    />
+    <Column
+      field="agents"
+      :header="t('thread.list.agents')"
+    >
+      <template #body="{ data }">
+        <AvatarGroup>
+          <Avatar
+            v-for="agent in data.agents"
+            :key="agent.agent_id + agent.agent_class"
+            v-tooltip="agent.agent_config.name"
+          >
+            <template #icon>
+              <Icon
+                :name="agent.agent_config.icon"
+                size="xl"
+              />
+            </template>
+          </Avatar>
+        </AvatarGroup>
+      </template>
+    </Column>
+    <Column
+      field="users"
+      :header="t('thread.users')"
+    >
+      <template #body="{ data }">
+        <AvatarGroup>
+          <Avatar
+            v-for="user in data.users"
+            :key="user.id"
+            v-tooltip="user.name"
+            :image="user?.profile_image ?? undefined"
+            :label="!user?.profile_image ? initials(user) : undefined"
+            shape="circle"
+          />
+        </AvatarGroup>
+      </template>
+    </Column>
+    <Column
+      field="Created"
+      :header="t('thread.list.created')"
+    >
+      <template #body="{ data }">
+        <p>{{ formatted(data.created_at) }}</p>
+      </template>
+    </Column>
+    <Column
+      field="num_turns"
+      :header="t('thread.list.numTurns')"
+    >
+      <template #body="{ data }">
+        <Badge :value="data.num_turns" />
+      </template>
+    </Column>
+    <Column
+      field="num_events"
+      :header="t('thread.list.numEvents')"
+    >
+      <template #body="{ data }">
+        <Badge :value="data.num_events" />
+      </template>
+    </Column>
+    <Column
+      field="has_errors"
+      :header="t('thread.list.status')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.has_errors"
+          severity="danger"
+          :value="t('event.list.error')"
+        />
+        <Tag
+          v-else
+          severity="success"
+          :value="t('event.list.successful')"
+        />
+      </template>
+    </Column>
+    <Column
+      field="has_errors"
+      :header="t('thread.list.pending')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.has_pending"
+          severity="warn"
+          :value="pendingType(data)"
+        />
+        <Tag
+          v-else
+          severity="success"
+          :value="t('event.list.no')"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto, MinimalUserDto } from '@core/sdk/client'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const props = defineProps<{
+  threads: ThreadDto[]
+}>()
+
+const emit = defineEmits<{
+  selected: [thread: ThreadDto]
+}>()
+
+const initials = (user: MinimalUserDto) => user.name?.split(' ').map(n => n[0]).join('')
+const formatted = (datestr: string) => useDateFormat(new Date(datestr), 'DD.MM.YYYY HH:mm:ss')
+const { pendingType } = useThreadUtils()
+
+const selectedThread = computed(() => {
+  return props.threads.filter((thread: ThreadDto) => {
+    return thread.id === route.params.thread_id
+  })
+})
+</script>

package/components/User/Bar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-row items-center gap-5 pr-3">
+    <TenantSwitcher />
+    <NotificationsOverlay />
+
+    <Button
+      v-tooltip.bottom="{ value: t('bar.toggle_dark_mode') }"
+      :icon="isDark ? 'pi pi-sun' : 'pi pi-moon'"
+      variant="text"
+      rounded
+      :aria-label="t('bar.toggle_dark_mode')"
+      @click="toggleDarkMode()"
+    />
+
+    <div
+      v-if="myUserIsLoading"
+      class="flex flex-row gap-2"
+    >
+      <div class="flex flex-col gap-1">
+        <Skeleton
+          width="6rem"
+          height="1rem"
+        />
+        <Skeleton
+          width="10rem"
+          height="1rem"
+        />
+      </div>
+      <Skeleton
+        shape="circle"
+        size="2.5rem"
+        class="mr-2"
+      />
+    </div>
+    <div
+      v-else
+      class="flex items-center gap-5 pr-5"
+    >
+      <div>
+        <p class="text-xs font-bold">
+          {{ myUser?.name }}
+        </p>
+        <p class="text-xs">
+          {{ myUser?.email }}
+        </p>
+      </div>
+      <Avatar
+        :image="myUser?.profile_image ?? undefined"
+        :label="!myUser?.profile_image ? userInitials : undefined"
+        shape="circle"
+        size="normal"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NotificationsOverlay from '@core/components/Notification/NotificationsOverlay.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const { myUser, myUserIsLoading } = useMyUser()
+
+const userInitials = computed(() =>
+  myUser.value?.name?.split(' ').map(n => n[0]).join(''),
+)
+
+const isDark = useDarkMode()
+
+function toggleDarkMode() {
+  isDark.value = !isDark.value
+}
+</script>

package/components/User/List.vue

@@ -0,0 +1,86 @@
+<template>
+  <DataTable
+    :value="users"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    :selection="selectedUser"
+    size="small"
+    @update:selection="emit('selected', $event)"
+  >
+    <Column
+      field="profile_image"
+      :header="t('user.list.avatar')"
+    >
+      <template #body="{ data }">
+        <Avatar
+          v-tooltip="data.name"
+          :image="data?.profile_image ?? undefined"
+          :label="!data?.profile_image ? initials(data) : undefined"
+          shape="circle"
+        />
+      </template>
+    </Column>
+    <Column
+      field="name"
+      :header="t('user.list.name')"
+    />
+    <Column
+      field="email"
+      :header="t('user.list.email')"
+    />
+    <Column
+      field="is_sys_admin"
+      :header="t('user.list.sys_admin')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.is_sys_admin"
+          :value="t('user.list.sys_admin_tag')"
+          severity="success"
+          icon="pi pi-crown"
+        />
+      </template>
+    </Column>
+    <Column
+      field="roles"
+      :header="t('user.list.roles')"
+    >
+      <template #body="{ data }">
+        <UserRoleChips
+          :roles="data.roles"
+          :available-roles="availableRoles ?? []"
+          :readonly="readonly"
+          @assign="(roleName) => emit('assign', { user: data, roleName })"
+          @revoke="(roleName) => emit('revoke', { user: data, roleName })"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type { RoleResponse, UserDto } from '@core/sdk/client'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const props = defineProps<{
+  users: UserDto[]
+  availableRoles?: RoleResponse[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  selected: [user: UserDto]
+  assign: [payload: { user: UserDto, roleName: string }]
+  revoke: [payload: { user: UserDto, roleName: string }]
+}>()
+
+const initials = (user: UserDto) => user.name?.split(' ').map(n => n[0]).join('')
+
+const selectedUser = computed(() => {
+  return props.users.filter((user: UserDto) => {
+    return user.id === route.params.user_id
+  })
+})
+</script>

package/components/User/RoleChips.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <Chip
+      v-for="role in roles"
+      :key="role"
+      :label="role"
+      :removable="!readonly"
+      @remove="confirmRevoke(role)"
+    />
+    <span
+      v-if="!roles?.length"
+      class="text-sm text-muted-color"
+    >
+      {{ t('user.role_chips.no_roles') }}
+    </span>
+
+    <Button
+      v-if="!readonly && assignableRoles.length > 0"
+      v-tooltip.top="t('user.role_chips.assign')"
+      icon="pi pi-plus"
+      text
+      rounded
+      size="small"
+      :aria-label="t('user.role_chips.assign')"
+      @click="openAssignMenu($event)"
+    />
+    <Menu
+      ref="assignMenu"
+      :model="assignMenuItems"
+      :popup="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from 'primevue/useconfirm'
+
+import type { RoleResponse } from '@core/sdk/client'
+import type { MenuItem } from 'primevue/menuitem'
+
+const props = defineProps<{
+  roles: string[]
+  availableRoles: RoleResponse[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  assign: [roleName: string]
+  revoke: [roleName: string]
+}>()
+
+const { t } = useI18n()
+const confirm = useConfirm()
+
+const assignableRoles = computed<RoleResponse[]>(() =>
+  (props.availableRoles ?? []).filter(r => !(props.roles ?? []).includes(r.name)),
+)
+
+const assignMenu = ref<{ toggle: (event: Event) => void } | null>(null)
+
+const assignMenuItems = computed<MenuItem[]>(() =>
+  assignableRoles.value.map(role => ({
+    label: role.name,
+    icon: 'pi pi-shield',
+    command: () => emit('assign', role.name),
+  })),
+)
+
+const openAssignMenu = (event: Event) => {
+  assignMenu.value?.toggle(event)
+}
+
+const confirmRevoke = (roleName: string) => {
+  confirm.require({
+    message: t('user.role_chips.revoke_confirm_message', { role: roleName }),
+    header: t('user.role_chips.revoke_confirm_header'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: { label: t('common.actions.cancel'), severity: 'secondary', outlined: true },
+    acceptProps: { label: t('user.role_chips.revoke'), severity: 'danger' },
+    accept: () => emit('revoke', roleName),
+  })
+}
+</script>

package/components/User/Settings.vue

@@ -0,0 +1,79 @@
+<template>
+  <Button
+    icon="pi pi-cog"
+    aria-label="Settings"
+    variant="text"
+    size="large"
+    @click="toggle"
+  />
+  <Popover
+    ref="op"
+    class="[--p-popover-background:var(--p-surface-50)] [--p-popover-border-color:var(--p-surface-200)] dark:[--p-popover-background:var(--p-surface-950)] dark:[--p-popover-border-color:var(--p-surface-800)]"
+  >
+    <div class="flex flex-col gap-4 p-2">
+      <div class="flex flex-col gap-2">
+        <label
+          for="user-language-select"
+          class="font-medium"
+        >{{ t('user.language') }}</label>
+        <Select
+          v-model="selectedLocale"
+          input-id="user-language-select"
+          :options="localeOptions"
+          option-label="name"
+          class="w-full"
+        />
+      </div>
+      <Button
+        class="w-full"
+        :label="t('user.logout')"
+        variant="text"
+        icon="pi pi-arrow-circle-right"
+        icon-pos="right"
+        @click="auth.logout"
+      />
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { changeLocale } from '@formkit/vue'
+
+const auth = useAuth()
+const { t, locale, locales } = useI18n()
+const queryCache = useQueryCache()
+const switchLocalePath = useSwitchLocalePath()
+const router = useRouter()
+
+const op = ref()
+const toggle = (event: Event) => {
+  op.value.toggle(event)
+}
+
+// Format locales for the Select component
+const localeOptions = computed(() => {
+  return locales.value.map(l => ({
+    code: l.code,
+    name: l.name,
+  }))
+})
+
+changeLocale(locale.value)
+
+// Track the selected locale
+const selectedLocale = computed({
+  get: () => {
+    return localeOptions.value.find(l => l.code === locale.value) || localeOptions.value[0]
+  },
+  set: (newValue) => {
+    if (newValue?.code && newValue.code !== locale.value) {
+      op.value.hide()
+      changeLocale(newValue.code)
+      router.push(switchLocalePath(newValue.code))
+        .then(() => {
+          queryCache.invalidateQueries()
+        })
+    }
+  },
+})
+</script>

package/components/Workflow/Modal.vue

@@ -0,0 +1,39 @@
+<template>
+  <Dialog
+    :visible="modelValue"
+    modal
+    :header="header ?? t('agent.workflow.title')"
+    :style="{ width: '90vw', height: '85vh' }"
+    :content-style="{ height: '100%' }"
+    @update:visible="emit('update:modelValue', $event)"
+  >
+    <div class="size-full">
+      <WorkflowVisualization
+        v-if="graphData && graphData.nodes && graphData.nodes.length"
+        :graph-data="graphData"
+      />
+      <div
+        v-else
+        class="flex size-full items-center justify-center text-surface-500"
+      >
+        {{ t('agent.workflow.empty') }}
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { WorkflowGraph } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+defineProps<{
+  modelValue: boolean
+  graphData: WorkflowGraph | null | undefined
+  header?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>

package/components/Workflow/NodeCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="w-[298px] overflow-hidden rounded-xl border bg-surface-50 shadow-md dark:bg-surface-950"
+    :class="accent === 'red'
+      ? 'border-red-300 dark:border-red-900/60'
+      : 'border-surface-200 dark:border-surface-800'"
+  >
+    <div class="flex flex-row gap-3 p-3">
+      <div
+        class="mt-1 flex size-12 shrink-0 items-center justify-center rounded-xl"
+        :class="accent === 'red'
+          ? 'bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-300'
+          : 'bg-surface-100 dark:bg-surface-800'"
+      >
+        <Icon
+          :name="icon"
+          size="1.5em"
+        />
+      </div>
+      <div class="flex flex-col">
+        <span class="font-bold">{{ label }}</span>
+        <span
+          v-if="description"
+          class="text-xs text-surface-500"
+        >{{ description }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  icon: string
+  label: string
+  description?: string | null
+  accent?: 'neutral' | 'red'
+}>(), {
+  accent: 'neutral',
+  description: null,
+})
+</script>

package/components/Workflow/StartNode.vue

@@ -0,0 +1,24 @@
+<template>
+  <WorkflowNodeCard
+    :icon="data.icon ?? 'mage:play-circle-fill'"
+    :label="data.label"
+    :description="data.description"
+    accent="red"
+  />
+  <Handle
+    type="source"
+    :position="Position.Bottom"
+    :connectable="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { Handle, Position } from '@vue-flow/core'
+
+import type { NodeData } from '@core/sdk/client'
+
+defineProps<{
+  id: string
+  data: NodeData
+}>()
+</script>

package/components/Workflow/StepNode.vue

@@ -0,0 +1,27 @@
+<template>
+  <WorkflowNodeCard
+    :icon="data.icon ?? 'mingcute:ai-fill'"
+    :label="data.label"
+    :description="data.description"
+  />
+  <Handle
+    type="target"
+    :position="Position.Top"
+  />
+  <Handle
+    type="source"
+    :position="Position.Bottom"
+    :connectable="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { Handle, Position } from '@vue-flow/core'
+
+import type { NodeData } from '@core/sdk/client'
+
+defineProps<{
+  id: string
+  data: NodeData
+}>()
+</script>

package/components/Workflow/StopNode.vue

@@ -0,0 +1,24 @@
+<template>
+  <WorkflowNodeCard
+    :icon="data.icon ?? 'mage:stop-circle-fill'"
+    :label="data.label"
+    :description="data.description"
+    accent="red"
+  />
+  <Handle
+    type="target"
+    :position="Position.Top"
+    :connectable="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { Handle, Position } from '@vue-flow/core'
+
+import type { NodeData } from '@core/sdk/client'
+
+defineProps<{
+  id: string
+  data: NodeData
+}>()
+</script>