@swiss-ai-hub/web 0.290.11

package/components/Workflow/Visualization.vue

@@ -0,0 +1,265 @@
+<template>
+  <VueFlow
+    :nodes="nodes"
+    :edges="edges"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :nodes-connectable="false"
+    fit-view-on-init
+    class="size-full"
+  >
+    <Background />
+
+    <template #node-start="{ id, data }">
+      <WorkflowStartNode
+        :id="id"
+        :data="data"
+      />
+    </template>
+
+    <template #node-step="{ id, data }">
+      <WorkflowStepNode
+        :id="id"
+        :data="data"
+      />
+    </template>
+
+    <template #node-stop="{ id, data }">
+      <WorkflowStopNode
+        :id="id"
+        :data="data"
+      />
+    </template>
+  </VueFlow>
+</template>
+
+<script setup lang="ts">
+import { Background } from '@vue-flow/background'
+import { VueFlow, MarkerType, Position, useVueFlow } from '@vue-flow/core'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+
+import type { WorkflowGraph } from '@core/sdk/client'
+
+const NODE_WIDTH = 298
+const NODE_HEIGHT = 100
+const ROW_GAP = 80
+const COL_GAP = 80
+
+const props = defineProps<{
+  graphData: WorkflowGraph
+}>()
+
+const { updateNodeInternals, fitView } = useVueFlow()
+
+// Re-measure handle positions after the modal's open animation has settled.
+// Without this, vue-flow's initial handleBounds are taken mid-animation and end
+// up ~10px off-center, shifting edge endpoints sideways from the actual handles.
+// The handle is cleared on unmount so a quick close-during-animation won't call
+// updateNodeInternals/fitView on a disposed VueFlow instance.
+let settleTimer: ReturnType<typeof setTimeout> | null = null
+onMounted(() => {
+  settleTimer = setTimeout(() => {
+    updateNodeInternals(props.graphData.nodes.map(n => n.id))
+    fitView({ padding: 0.15 })
+    settleTimer = null
+  }, 350)
+})
+onBeforeUnmount(() => {
+  if (settleTimer !== null) {
+    clearTimeout(settleTimer)
+    settleTimer = null
+  }
+})
+
+const COL_PITCH = NODE_WIDTH + COL_GAP
+const ROW_PITCH = NODE_HEIGHT + ROW_GAP
+
+type Adjacency = Map<string, string[]>
+type GridSlot = { row: number, col: number }
+type ColumnCount = 1 | 2 | 3
+
+const chooseColumnCount = (middleCount: number): ColumnCount => {
+  if (middleCount >= 12) return 3
+  if (middleCount >= 6) return 2
+  return 1
+}
+
+const FILL_ORDERS: Record<ColumnCount, [number[], number[]]> = {
+  1: [[0], [0]],
+  2: [[1, 0], [0, 1]],
+  3: [[1, 0, 2], [1, 2, 0]],
+}
+
+const fillOrderForRow = (colCount: ColumnCount, row: number): number[] =>
+  FILL_ORDERS[colCount][row % 2]
+
+const buildAdjacency = (links: { source: string, target: string }[]): { children: Adjacency, parents: Adjacency } => {
+  const children: Adjacency = new Map()
+  const parents: Adjacency = new Map()
+  for (const { source, target } of links) {
+    const kids = children.get(source) ?? []
+    kids.push(target)
+    children.set(source, kids)
+    const pars = parents.get(target) ?? []
+    pars.push(source)
+    parents.set(target, pars)
+  }
+  return { children, parents }
+}
+
+/** BFS from start nodes, yielding middle-node ids in visit order. */
+const bfsMiddleOrder = (startIds: string[], middleIds: Set<string>, children: Adjacency): string[] => {
+  const visited = new Set<string>(startIds)
+  const order: string[] = []
+  const queue = [...startIds]
+  while (queue.length) {
+    const current = queue.shift()!
+    for (const child of children.get(current) ?? []) {
+      if (visited.has(child)) continue
+      visited.add(child)
+      if (middleIds.has(child)) order.push(child)
+      queue.push(child)
+    }
+  }
+  return order
+}
+
+const requiredRowFor = (nodeId: string, parents: Adjacency, rowOf: Map<string, number>): number => {
+  let required = 0
+  for (const pid of parents.get(nodeId) ?? []) {
+    const pr = rowOf.get(pid)
+    if (pr !== undefined && pr + 1 > required) required = pr + 1
+  }
+  return required
+}
+
+const findFreeSlot = (
+  fromRow: number,
+  colCount: ColumnCount,
+  taken: Set<string>,
+): GridSlot => {
+  // Upper bound: in the worst case every already-taken slot forces us to the
+  // next row. `taken.size` rows is always enough to find a fresh one since we
+  // place at most one node per call. +2 keeps the bound loose for safety.
+  const maxRows = taken.size + 2
+  for (let row = fromRow; row < fromRow + maxRows; row++) {
+    for (const col of fillOrderForRow(colCount, row)) {
+      if (!taken.has(`${row}:${col}`)) return { row, col }
+    }
+  }
+  throw new Error(`findFreeSlot: no free slot found within ${maxRows} rows from ${fromRow}`)
+}
+
+/** Assign (row, col) slots to each middle node in BFS order. */
+const assignSlots = (bfsOrder: string[], parents: Adjacency, colCount: ColumnCount): Map<string, GridSlot> => {
+  const slotOf = new Map<string, GridSlot>()
+  const taken = new Set<string>()
+  const rowOf = new Map<string, number>()
+  for (const nodeId of bfsOrder) {
+    const slot = findFreeSlot(requiredRowFor(nodeId, parents, rowOf), colCount, taken)
+    slotOf.set(nodeId, slot)
+    rowOf.set(nodeId, slot.row)
+    taken.add(`${slot.row}:${slot.col}`)
+  }
+  return slotOf
+}
+
+/** Column index → horizontal pixel offset. Column 1 (center in 3-col) is at x=0. */
+const columnX = (colCount: ColumnCount, col: number): number => {
+  if (colCount === 1) return 0
+  if (colCount === 2) return (col - 0.5) * COL_PITCH
+  return (col - 1) * COL_PITCH
+}
+
+/** Distribute `total` nodes horizontally around x=0. */
+const centeredGroupX = (index: number, total: number): number =>
+  (index - (total - 1) / 2) * COL_PITCH
+
+/**
+ * Custom layout algorithm:
+ * - Start and stop nodes are centered as groups on their own rows; their x
+ *   positions are independent of the column grid.
+ * - Middle nodes fill 1/2/3 columns depending on middle-node count
+ *   (<6 → 1 col, 6–11 → 2, 12+ → 3).
+ * - Processing order: BFS from start nodes.
+ * - Each node's row = min row such that all its already-placed parents have
+ *   lower rows (cycles back to earlier rows are ignored).
+ * - Column fill order per row: center first, then alternate sides by row parity.
+ * - If a row has no free columns at the required row, bump to the next row.
+ */
+const layout = computed(() => {
+  const { nodes: graphNodes, links } = props.graphData
+
+  const startNodes = graphNodes.filter(n => n.type === 'start')
+  const stopNodes = graphNodes.filter(n => n.type === 'stop')
+  const middleNodes = graphNodes.filter(n => n.type === 'step')
+  const middleIds = new Set(middleNodes.map(n => n.id))
+  const colCount = chooseColumnCount(middleNodes.length)
+
+  const { children, parents } = buildAdjacency(links)
+
+  const bfsOrder = bfsMiddleOrder(startNodes.map(n => n.id), middleIds, children)
+  // Include any middle nodes unreachable from start (defensive).
+  for (const n of middleNodes) {
+    if (!bfsOrder.includes(n.id)) bfsOrder.push(n.id)
+  }
+
+  const slotOf = assignSlots(bfsOrder, parents, colCount)
+
+  const layoutMap = new Map<string, { x: number, y: number }>()
+  startNodes.forEach((node, i) => {
+    layoutMap.set(node.id, { x: centeredGroupX(i, startNodes.length), y: 0 })
+  })
+  let maxRow = -1
+  middleNodes.forEach((node) => {
+    const { row, col } = slotOf.get(node.id)!
+    if (row > maxRow) maxRow = row
+    layoutMap.set(node.id, { x: columnX(colCount, col), y: (row + 1) * ROW_PITCH })
+  })
+  const stopRow = maxRow + 2
+  stopNodes.forEach((node, i) => {
+    layoutMap.set(node.id, { x: centeredGroupX(i, stopNodes.length), y: stopRow * ROW_PITCH })
+  })
+  return layoutMap
+})
+
+const nodes = computed(() => props.graphData.nodes.map((node) => {
+  const pos = layout.value.get(node.id)!
+  return {
+    id: node.id,
+    type: node.type,
+    position: pos,
+    data: node,
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Top,
+  }
+}))
+
+const edges = computed(() => props.graphData.links.map(link => ({
+  id: `${link.source}->${link.target}`,
+  source: link.source,
+  target: link.target,
+  animated: true,
+  markerEnd: { type: MarkerType.ArrowClosed, width: 24, height: 24 },
+})))
+</script>
+
+<style scoped>
+/* Selected nodes: bolder red border + red tint so even start/end nodes
+ * (already red) stand out clearly. Scoped + :deep keeps these rules from
+ * leaking into any sibling component that also uses vue-flow. */
+:deep(.vue-flow__node.selected > *) {
+  border-color: rgb(239 68 68) !important; /* red-500 */
+  background-color: oklch(88.5% 0.062 18.334) !important; /* red-100 */
+}
+:deep(.dark .vue-flow__node.selected > *) {
+  background-color: oklch(25.8% 0.092 26.042) !important;
+}
+:deep(.vue-flow__edge.selected .vue-flow__edge-path) {
+  stroke: rgb(239 68 68) !important;
+  stroke-width: 2 !important;
+}
+</style>

package/components/mdc/MarkdownFigure.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="py-5">
+    <MDCSlot unwrap="p" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

package/components/mdc/MarkdownTable.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="py-5">
+    <MDCSlot unwrap="p" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

package/components/mdc/ResolveImageComponent.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <img
+      :src="imageUrl"
+      :alt="alt"
+      :width="width"
+      :height="height"
+    >
+    <p
+      v-if="alt"
+      class="text-[10px] italic leading-3 text-surface-500"
+    >
+      {{ alt }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getFileUrl } from '@core/sdk/client'
+
+const props = defineProps<{
+  src: string
+  alt?: string
+  width?: string | number
+  height?: string | number
+}>()
+
+const { tenantId } = useTenant()
+const imageUrl = ref<string | null>(props.src)
+
+const fetchAndSetImageUrl = async () => {
+  if (props.src.startsWith('http')) {
+    return props.src
+  }
+  if (!tenantId.value) return
+
+  let src = props.src
+  if (src.includes('://')) {
+    src = src.split('://')[1]
+  }
+  const parts = src.split('/')
+  const [container, file_path] = [parts[0], parts.slice(1).join('/')]
+
+  const { url } = await getFileUrl({
+    composable: '$fetch',
+    path: {
+      tenant_id: tenantId.value!,
+      container,
+      file_path,
+    },
+  })
+  imageUrl.value = url
+}
+
+onMounted(() => {
+  fetchAndSetImageUrl()
+})
+</script>

package/composables/agent/useAgentClass.ts

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

package/composables/agent/useAgentClassInstances.ts

@@ -0,0 +1,27 @@
+import { type FullAgentInstanceDto, getAgentClassInstances } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useAgentClassInstances = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const { data: agentClassInstances, isPending: agentClassInstancesAreLoading } = useQuery<FullAgentInstanceDto[]>({
+    key: () => ['tenant', tenantId.value, 'agent-class-instances', route.params.agent_class as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('agent_class'),
+    query: async () => {
+      return await getAgentClassInstances({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          agent_class: route.params.agent_class as string,
+        },
+      })
+    },
+  })
+  return {
+    agentClassInstances,
+    agentClassInstancesAreLoading,
+  }
+})

package/composables/agent/useAgentClasses.ts

@@ -0,0 +1,27 @@
+import { type AgentClassDtoReadable, getAgentClasses } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export type AgentClassDto = AgentClassDtoReadable
+
+export const useAgentClasses = defineQuery((options?: { online?: boolean }) => {
+  const { tenantId } = useTenant()
+
+  const { data: agentClasses, isPending: agentClassesAreLoading } = useQuery<AgentClassDto[]>({
+    key: () => ['tenant', tenantId.value, 'agent-classes', options?.online],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getAgentClasses({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          online: options?.online,
+        },
+      })
+    },
+  })
+  return {
+    agentClasses,
+    agentClassesAreLoading,
+  }
+})

package/composables/agent/useAgentIconFromThread.ts

@@ -0,0 +1,8 @@
+import type { MinimalAgentInstanceDto, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+export default (event: ContextualizedAgentEvent, thread: ThreadDto) => {
+  return computed<string | undefined>(() => thread.participating_agents
+    ?.find((agent: MinimalAgentInstanceDto) => agent.agent_id == event.agent_id && agent.agent_class == event.agent_class)
+    ?.agent_config?.icon,
+  )
+}

package/composables/agent/useAgentInstance.ts

@@ -0,0 +1,28 @@
+import { type FullAgentInstanceDto, getAgentInstance } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useAgentInstance = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const { data: agentInstance, isPending: agentInstanceIsLoading } = useQuery<FullAgentInstanceDto>({
+    key: () => ['tenant', tenantId.value, 'agent-instances', route.params.agent_class as string, route.params.agent_id as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('agent_id', 'agent_class'),
+    query: async () => {
+      return await getAgentInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          agent_id: route.params.agent_id as string,
+          agent_class: route.params.agent_class as string,
+        },
+      })
+    },
+  })
+  return {
+    agentInstance,
+    agentInstanceIsLoading,
+  }
+})

package/composables/agent/useAgentInstanceThreads.ts

@@ -0,0 +1,76 @@
+import { getAgentInstanceThreads } from '@core/sdk/client'
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const useAgentInstanceThreads = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  // Pagination state
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+
+  // Query to fetch paginated threads
+  const threadQuery = useQuery({
+    key: () => [
+      'tenant',
+      tenantId.value,
+      'agent-instance-threads',
+      route.params.agent_id as string,
+      route.params.agent_class as string,
+      currentPage.value,
+      pageSize.value,
+    ],
+    enabled: useTenantReady('agent_id', 'agent_class'),
+    query: async () => {
+      return await getAgentInstanceThreads({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          agent_id: route.params.agent_id as string,
+          agent_class: route.params.agent_class as string,
+        },
+        query: {
+          page: currentPage.value,
+          page_size: pageSize.value,
+        },
+      })
+    },
+    placeholderData: previousData => previousData, // Keep previous data while fetching
+  })
+
+  // Update page size and refetch
+  const setPageSize = (newSize: number) => {
+    pageSize.value = newSize
+    // When changing page size, reset to first page to avoid out-of-range issues
+    currentPage.value = 1
+  }
+
+  // Update current page and refetch
+  const setPage = (newPage: number) => {
+    currentPage.value = newPage
+  }
+
+  // Extract pagination metadata
+  const paginationMeta = computed(() => {
+    const data = threadQuery.state.value?.data
+
+    return {
+      total: data?.total ?? 0,
+      currentPage: data?.page ?? 1,
+      pageSize: data?.page_size ?? 10,
+      totalPages: data?.total_pages ?? 1,
+    }
+  })
+
+  return {
+    threads: computed(() => threadQuery.state.value?.data?.threads ?? []),
+    isLoading: computed(() => threadQuery.asyncStatus.value === 'loading'),
+    pagination: paginationMeta,
+    currentPage,
+    pageSize,
+    setPage,
+    setPageSize,
+    refetch: threadQuery.refetch,
+  }
+})

package/composables/agent/useAgentInstances.ts

@@ -0,0 +1,25 @@
+import { type FullAgentInstanceDto, getAllAgentInstances } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useAgentInstances = defineQuery((options?: { online?: boolean }) => {
+  const { tenantId } = useTenant()
+
+  const { data: agentInstances, isPending: agentInstancesAreLoading } = useQuery<FullAgentInstanceDto[]>({
+    key: () => ['tenant', tenantId.value, 'agent-instances', options?.online],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getAllAgentInstances({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          online: options?.online,
+        },
+      })
+    },
+  })
+  return {
+    agentInstances,
+    agentInstancesAreLoading,
+  }
+})

package/composables/agent/useAgentNavigation.ts

@@ -0,0 +1,35 @@
+import type { NavItem } from '@core/types/NavItem'
+
+export function useAgentNavigation() {
+  const router = useRouter()
+  const route = useRoute()
+  const tenantPath = useTenantPath()
+  const { t } = useI18n()
+
+  const navItems = computed<NavItem[]>(() => [
+    {
+      name: t('agent.tabs.myAgents'),
+      key: 'agents',
+      path: '/service/agents',
+      isActive: () => route.path.startsWith(tenantPath('/service/agents')) && !route.path.includes('/service/agents/templates'),
+    },
+    {
+      name: t('agent.tabs.templates'),
+      key: 'templates',
+      path: '/service/agents/templates',
+      isActive: () => route.path.includes('/service/agents/templates'),
+    },
+  ])
+
+  const activeNavItem = computed<NavItem | undefined>(() => {
+    return navItems.value.find((navItem: NavItem) => navItem.isActive())
+  })
+
+  const toNavItem = (navItem: NavItem | null) => {
+    if (navItem) {
+      router.push(tenantPath(navItem.path))
+    }
+  }
+
+  return { navItems, activeNavItem, toNavItem }
+}

package/composables/agent/useCreateAgentInstance.ts

@@ -0,0 +1,33 @@
+import { createAgentInstance, type CreateAgentInstanceRequest } from '@core/sdk/client'
+
+export const useCreateAgentInstance = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const {
+    mutateAsync: createAgentInstanceMutation,
+    isPending: isCreating,
+    error: createError,
+  } = useMutation({
+    mutation: async ({ agentClass, request, tenantId }: { agentClass: string, request: CreateAgentInstanceRequest, tenantId: string }) => {
+      const result = await createAgentInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          agent_class: agentClass,
+        },
+        body: request,
+      })
+
+      // Invalidate agent instances cache to refresh the list
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'agent-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'agent-class-instances', agentClass] })
+      return result
+    },
+  })
+
+  return {
+    createAgentInstance: createAgentInstanceMutation,
+    isCreating,
+    createError,
+  }
+})

package/composables/agent/useDeleteAgentInstance.ts

@@ -0,0 +1,31 @@
+import { deleteAgentInstance } from '@core/sdk/client'
+
+export const useDeleteAgentInstance = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const {
+    mutateAsync: deleteAgentInstanceMutation,
+    isPending: isDeleting,
+    error: deleteError,
+  } = useMutation({
+    mutation: async ({ agentClass, agentId, tenantId }: { agentClass: string, agentId: string, tenantId: string }) => {
+      await deleteAgentInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          agent_class: agentClass,
+          agent_id: agentId,
+        },
+      })
+
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'agent-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'agent-class-instances', agentClass] })
+    },
+  })
+
+  return {
+    deleteAgentInstance: deleteAgentInstanceMutation,
+    isDeleting,
+    deleteError,
+  }
+})