@swiss-ai-hub/web 0.290.11

package/composables/thread/useThread.ts

@@ -0,0 +1,27 @@
+import { getThread, type ThreadDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useThread = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const { data: thread, isPending: threadIsLoading } = useQuery<ThreadDto>({
+    key: () => ['tenant', tenantId.value, 'threads', route.params.thread_id as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('thread_id'),
+    query: async () => {
+      return await getThread({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          thread_id: route.params.thread_id as string,
+        },
+      })
+    },
+  })
+  return {
+    thread,
+    threadIsLoading,
+  }
+})

package/composables/thread/useThreadEvents.ts

@@ -0,0 +1,91 @@
+import { getAgentEventsInThread, type ContextualizedAgentEvent } from '@core/sdk/client'
+import { useWebSocket } from '@vueuse/core'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useThreadEvents = defineQuery(() => {
+  const { getBearer } = useAuth()
+  const runtimeConfig = useRuntimeConfig()
+
+  const route = useRoute()
+  const { tenantId } = useTenant()
+  const queryCache = useQueryCache()
+
+  const { data: threadEvents, isPending: threadEventsAreLoading } = useQuery<ContextualizedAgentEvent[]>({
+    key: () => ['tenant', tenantId.value, 'thread', route.params.thread_id as string, 'events'],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('thread_id'),
+    query: async () => {
+      return await getAgentEventsInThread({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          thread_id: route.params.thread_id as string,
+        },
+      })
+    },
+  })
+
+  const { data: newEvent } = useWebSocket<string>(runtimeConfig.public.ws.endpoint, {
+    autoReconnect: {
+      retries: -1,
+      delay: 1000,
+    },
+    onConnected(ws) {
+      getBearer()
+        .then((token) => {
+          ws.send(JSON.stringify({ type: 'auth', token }))
+        })
+    },
+  })
+
+  // Update cache when new events arrive via WebSocket
+  watch(() => newEvent.value, (rawEventData) => {
+    if (!rawEventData) return
+
+    try {
+      const event = JSON.parse(rawEventData) as ContextualizedAgentEvent
+
+      // Only process events for the current thread
+      if (event.thread_id === route.params.thread_id) {
+        // Get current events from cache
+        const key = ['tenant', tenantId.value, 'thread', route.params.thread_id, 'events']
+        const currentEvents = queryCache.getQueryData<ContextualizedAgentEvent[]>(key) || []
+
+        // Check if event already exists (avoid duplicates)
+        const eventExists = currentEvents.some(e => e.event_id === event.event_id)
+
+        if (!eventExists) {
+          // Add new event to the cache
+          const updatedEvents = [...currentEvents, event]
+
+          // Sort events if needed
+          updatedEvents.sort((a, b) =>
+            (a.event.created_at ?? 0) - (b.event.created_at ?? 0),
+          )
+
+          // Update the cache with the new array
+          queryCache.setQueryData(key, updatedEvents)
+        }
+
+        // Invalidate queries on stop event
+        const parents = event.event._parent_event_names
+        if (parents.includes('StopEvent') || parents.includes('ExceptionEvent')) {
+          new Promise(r => setTimeout(r, 500)).then(() => {
+            queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'threads'] })
+            queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'threads', event.thread_id] })
+            queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'agent', event.agent_class, event.agent_id] })
+          })
+        }
+      }
+    }
+    catch (error) {
+      console.error('Error processing WebSocket event:', error)
+    }
+  })
+
+  return {
+    threadEvents,
+    threadEventsAreLoading,
+  }
+})

package/composables/thread/useThreadUtils.ts

@@ -0,0 +1,49 @@
+import {
+  createThread,
+  type CreateThreadRequest,
+  type DisplayStatistics,
+  type RunStatistics,
+  type ThreadDto,
+  type ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+export const useThreadUtils = () => {
+  const { t } = useI18n()
+
+  const pendingType = (thread: ThreadDto) => {
+    if (thread.open_hitl) {
+      return t('thread.utils.pendingTypes.hitl')
+    }
+    if (thread.open_aitl) {
+      return t('thread.utils.pendingTypes.aitl')
+    }
+    if (thread.open_bitl) {
+      return t('thread.utils.pendingTypes.bitl')
+    }
+    return t('thread.utils.pendingTypes.unknown')
+  }
+
+  const runForEvent = (thread: ThreadDto, event: ContextualizedAgentEvent) => {
+    const display = thread?.displays?.find((display: DisplayStatistics) => display.display_id == event.display_id)
+    return display?.runs?.find((run: RunStatistics) => run.run_id == event.run_id)
+  }
+
+  const createNewThread = useMutation({
+    mutation: ({ name, user_ids, agents, tenantId }: CreateThreadRequest & { tenantId: string }) =>
+      createThread({
+        composable: '$fetch',
+        path: { tenant_id: tenantId },
+        body: {
+          name,
+          user_ids,
+          agents,
+        },
+      }),
+  })
+
+  return {
+    pendingType,
+    runForEvent,
+    createNewThread,
+  }
+}

package/composables/thread/useThreads.ts

@@ -0,0 +1,64 @@
+import { getUserThreads, type ThreadDto } from '@core/sdk/client'
+
+export const useThreads = defineQuery(() => {
+  const { tenantId } = useTenant()
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+
+  const threadsQuery = useQuery({
+    key: () => ['tenant', tenantId.value, 'threads', { page: currentPage.value, size: pageSize.value }],
+    enabled: useTenantReady(),
+    query: async () => {
+      const pageToFetch = Math.max(1, currentPage.value)
+
+      return await getUserThreads({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          page: pageToFetch,
+          page_size: pageSize.value,
+        },
+      })
+    },
+    placeholderData: previousData => previousData,
+  })
+
+  const setPageSize = (newSize: number) => {
+    if (newSize > 0) {
+      pageSize.value = newSize
+      currentPage.value = 1
+    }
+  }
+
+  const setPage = (newPage: number) => {
+    if (newPage > 0) {
+      currentPage.value = newPage
+    }
+  }
+
+  const paginationMeta = computed(() => {
+    const data = threadsQuery.state.value?.data
+
+    return {
+      total: data?.total ?? 0,
+      currentPage: data?.page ?? currentPage.value,
+      pageSize: data?.page_size ?? pageSize.value,
+      totalPages: data?.total_pages ?? 0,
+    }
+  })
+
+  const threads = computed(() => (threadsQuery.state.value?.data)?.threads ?? [] as ThreadDto[])
+
+  const isLoading = computed(() => threadsQuery.asyncStatus.value === 'loading')
+
+  return {
+    threads,
+    isLoading,
+    pagination: paginationMeta,
+    currentPage,
+    pageSize,
+    setPage,
+    setPageSize,
+    refetch: threadsQuery.refetch,
+  }
+})

package/composables/thread/useThreadsInfinite.ts

@@ -0,0 +1,56 @@
+import { getUserThreads, type ThreadDto } from '@core/sdk/client'
+
+export const useThreadsInfinite = defineQuery(() => {
+  const { tenantId } = useTenant()
+  const PAGE_SIZE = 10
+
+  const {
+    state,
+    loadMore: loadMoreThreads,
+    isLoading: threadsAreLoading,
+  } = useInfiniteQuery({
+    key: () => ['tenant', tenantId.value, 'threads'],
+    query: async ({ nextPage }) => {
+      if (nextPage === null) return null
+
+      return await getUserThreads({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          page: nextPage,
+          page_size: PAGE_SIZE,
+        },
+      })
+    },
+    initialPage: {
+      threads: [] as ThreadDto[],
+      nextPage: 1 as number | null,
+      totalThreads: 0,
+      totalPages: 0,
+    },
+    merge(accumulated, newData) {
+      // If no new data was returned, return the accumulated data
+      if (!newData) return accumulated
+
+      return {
+        threads: [...accumulated.threads, ...newData.threads],
+        nextPage: newData.page < newData.total_pages ? newData.page + 1 : null,
+        totalThreads: newData.total,
+        totalPages: newData.total_pages,
+      }
+    },
+  })
+
+  // Computed property for hasMore
+  const hasMoreThreads = computed(() => state.value?.data?.nextPage !== null)
+
+  // Expose only the necessary data and functions
+  return {
+    threads: computed(() => state.value?.data?.threads || []),
+    threadsAreLoading,
+    hasMoreThreads,
+    totalThreads: computed(() => state.value?.data?.totalThreads || 0),
+    totalPages: computed(() => state.value?.data?.totalPages || 0),
+    loadMoreThreads,
+  }
+})

package/composables/translation/useTranslate.ts

@@ -0,0 +1,20 @@
+import { translateText, type TranslationRequest } from '@core/sdk/client'
+
+export function useTranslate() {
+  const {
+    mutateAsync: translate,
+    isLoading: isTranslating,
+  } = useMutation({
+    mutation: ({ request, tenantId }: { request: TranslationRequest, tenantId: string }) =>
+      translateText({
+        composable: '$fetch',
+        path: { tenant_id: tenantId },
+        body: request,
+      }),
+  })
+
+  return {
+    translate,
+    isTranslating,
+  }
+}

package/composables/useRouteReady.ts

@@ -0,0 +1,21 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+/**
+ * Check if route parameters are ready for use in API queries.
+ * Prevents queries from executing with placeholder values during route transitions.
+ *
+ * @example
+ * const isRouteReady = useRouteReady('dataset_id')
+ * const isRouteReady = useRouteReady('agent_id', 'agent_class')
+ */
+export const useRouteReady = (...paramNames: string[]) => {
+  const route = useRoute()
+
+  return computed(() => {
+    return paramNames.every((param) => {
+      const value = route.params[param]
+      return !!value && typeof value === 'string' && !value.startsWith('{')
+    })
+  })
+}

package/composables/useTimeAgo.ts

@@ -0,0 +1,40 @@
+type TimeAgo = {
+  text: string
+  severity: 'success' | 'info' | 'warning' | 'danger'
+}
+
+export function useTimeAgo() {
+  const { t } = useI18n()
+
+  const getTimeAgo = (dateValue: string | number | Date): TimeAgo => {
+    const date = new Date(dateValue)
+    const now = new Date()
+    const diffInSeconds = (now.getTime() - date.getTime()) / 1000
+
+    const minute = 60
+    const hour = minute * 60
+    const day = hour * 24
+    const week = day * 7
+    const month = day * 30.44 // Average month length
+    const year = day * 365.25 // Account for leap years
+
+    if (diffInSeconds < hour) {
+      return { text: t('time_ago.last_hour'), severity: 'success' }
+    }
+    if (diffInSeconds < day) {
+      return { text: t('time_ago.last_day'), severity: 'success' }
+    }
+    if (diffInSeconds < week) {
+      return { text: t('time_ago.last_week'), severity: 'info' }
+    }
+    if (diffInSeconds < month) {
+      return { text: t('time_ago.last_month'), severity: 'warning' }
+    }
+    if (diffInSeconds < year) {
+      return { text: t('time_ago.last_year'), severity: 'danger' }
+    }
+    return { text: t('time_ago.long_time_ago'), severity: 'danger' }
+  }
+
+  return { getTimeAgo }
+}

package/composables/user/useAssignRoleToUser.ts

@@ -0,0 +1,22 @@
+import { assignRole } from '@core/sdk/client'
+
+export const useAssignRoleToUser = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync, isLoading } = useMutation({
+    mutation: async ({ tenantId, userId, roleName }: { tenantId: string, userId: string, roleName: string }) => {
+      const result = await assignRole({
+        composable: '$fetch',
+        path: { tenant_id: tenantId, user_id: userId },
+        body: { role_name: roleName },
+      })
+      queryCache.invalidateQueries()
+      return result
+    },
+  })
+
+  return {
+    assignRole: mutateAsync,
+    assignRoleIsLoading: isLoading,
+  }
+})

package/composables/user/useMyUser.ts

@@ -0,0 +1,25 @@
+import { getMyAccount, type UserWithAccessDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export default defineQuery(() => {
+  const { tenantId } = useTenant()
+
+  const {
+    data: myUser,
+    isPending: myUserIsLoading,
+  } = useQuery<UserWithAccessDto>({
+    key: () => ['tenant', tenantId.value, 'my_user'],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getMyAccount({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+      })
+    },
+  })
+  return {
+    myUser,
+    myUserIsLoading,
+  }
+})

package/composables/user/useRevokeRoleFromUser.ts

@@ -0,0 +1,21 @@
+import { revokeRole } from '@core/sdk/client'
+
+export const useRevokeRoleFromUser = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync, isLoading } = useMutation({
+    mutation: async ({ tenantId, userId, roleName }: { tenantId: string, userId: string, roleName: string }) => {
+      const result = await revokeRole({
+        composable: '$fetch',
+        path: { tenant_id: tenantId, user_id: userId, role_name: roleName },
+      })
+      queryCache.invalidateQueries()
+      return result
+    },
+  })
+
+  return {
+    revokeRole: mutateAsync,
+    revokeRoleIsLoading: isLoading,
+  }
+})

package/composables/user/useUser.ts

@@ -0,0 +1,30 @@
+import { getUser, type UserWithAccessDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export default defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const {
+    data: user,
+    isPending: userIsLoading,
+  } = useQuery<UserWithAccessDto>({
+    key: () => ['tenant', tenantId.value, 'users', route.params.user_id as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('user_id'),
+    query: async () => {
+      return await getUser({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          user_id: route.params.user_id as string,
+        },
+      })
+    },
+  })
+  return {
+    user,
+    userIsLoading,
+  }
+})

package/composables/user/useUsers.ts

@@ -0,0 +1,63 @@
+import { getUsers, type UserDto } from '@core/sdk/client'
+
+export default defineQuery(() => {
+  const { tenantId } = useTenant()
+  const currentPage = ref(1)
+  const pageSize = ref(20)
+
+  const usersQuery = useQuery({
+    key: () => ['tenant', tenantId.value, 'users', { page: currentPage.value, size: pageSize.value }],
+    enabled: useTenantReady(),
+    query: async () => {
+      const pageToFetch = Math.max(1, currentPage.value)
+
+      return await getUsers({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          page: pageToFetch,
+          page_size: pageSize.value,
+        },
+      })
+    },
+    placeholderData: previousData => previousData,
+  })
+
+  const setPageSize = (newSize: number) => {
+    if (newSize > 0) {
+      pageSize.value = newSize
+      currentPage.value = 1
+    }
+  }
+
+  const setPage = (newPage: number) => {
+    if (newPage > 0) {
+      currentPage.value = newPage
+    }
+  }
+
+  const pagination = computed(() => {
+    const data = usersQuery.data.value
+    return {
+      total: data?.total ?? 0,
+      currentPage: data?.page ?? currentPage.value,
+      pageSize: data?.page_size ?? pageSize.value,
+      totalPages: data?.total_pages ?? 0,
+    }
+  })
+
+  const users = computed(() => usersQuery.data.value?.users ?? ([] as UserDto[]))
+  const usersAreLoading = computed(() => usersQuery.isLoading.value)
+
+  return {
+    users,
+    usersAreLoading,
+    pagination,
+    currentPage,
+    pageSize,
+    setPage,
+    setPageSize,
+    refetchUsers: usersQuery.refetch,
+
+  }
+})

package/composables/utils/useJsonTree.ts

@@ -0,0 +1,138 @@
+import type { TreeNode } from 'primevue/treenode'
+
+interface JsonTreeOptions {
+  maxDepth?: number
+  expandLevel?: number
+}
+
+export const useJsonTree = () => {
+  const convertJsonToTree = (
+    data: unknown,
+    key: string = 'root',
+    options: JsonTreeOptions = {},
+  ): TreeNode[] => {
+    const { maxDepth = 10, expandLevel = 2 } = options
+
+    const createNode = (
+      value: unknown,
+      label: string,
+      depth: number = 0,
+      parentPath: string = '',
+    ): TreeNode => {
+      const currentPath = parentPath ? `${parentPath}.${label}` : label
+      const nodeKey = `${key}_${currentPath}_${depth}`.replaceAll(/[^a-zA-Z0-9_.-]/g, '_')
+
+      if (value === null) {
+        return {
+          key: nodeKey,
+          label: `${label}: null`,
+          type: 'null',
+          leaf: true,
+        }
+      }
+
+      if (value === undefined) {
+        return {
+          key: nodeKey,
+          label: `${label}: undefined`,
+          type: 'undefined',
+          leaf: true,
+        }
+      }
+
+      const valueType = typeof value
+
+      if (valueType === 'string') {
+        return {
+          key: nodeKey,
+          label: `${label}: "${value}"`,
+          type: 'string',
+          leaf: true,
+        }
+      }
+
+      if (valueType === 'number' || valueType === 'boolean') {
+        return {
+          key: nodeKey,
+          label: `${label}: ${value}`,
+          type: valueType,
+          leaf: true,
+        }
+      }
+
+      if (Array.isArray(value)) {
+        const arrayLabel = `${label} [${value.length}]`
+
+        if (depth >= maxDepth) {
+          return {
+            key: nodeKey,
+            label: `${arrayLabel}: [max depth reached]`,
+            type: 'array',
+            leaf: true,
+          }
+        }
+
+        const children = value.map((item, index) =>
+          createNode(item, `[${index}]`, depth + 1, currentPath),
+        )
+
+        return {
+          key: nodeKey,
+          label: arrayLabel,
+          type: 'array',
+          leaf: children.length === 0,
+          children,
+          expanded: depth < expandLevel,
+        }
+      }
+
+      if (valueType === 'object') {
+        const entries = Object.entries(value)
+        const objectLabel = `${label} {${entries.length}}`
+
+        if (depth >= maxDepth) {
+          return {
+            key: nodeKey,
+            label: `${objectLabel}: {max depth reached}`,
+            type: 'object',
+            leaf: true,
+          }
+        }
+
+        const children = entries.map(([objKey, objValue]) =>
+          createNode(objValue, objKey, depth + 1, currentPath),
+        )
+
+        return {
+          key: nodeKey,
+          label: objectLabel,
+          type: 'object',
+          leaf: children.length === 0,
+          children,
+          expanded: depth < expandLevel,
+        }
+      }
+
+      // Fallback for unknown types
+      return {
+        key: nodeKey,
+        label: `${label}: ${String(value)}`,
+        type: 'unknown',
+        leaf: true,
+      }
+    }
+
+    if (typeof data === 'object' && data !== null) {
+      const entries = Object.entries(data)
+      return entries.map(([objKey, objValue]) =>
+        createNode(objValue, objKey, 0, ''),
+      )
+    }
+
+    return [createNode(data, 'value', 0, '')]
+  }
+
+  return {
+    convertJsonToTree,
+  }
+}