@swiss-ai-hub/web 0.290.11

package/composables/event/useBasicEventStatistics.ts

@@ -0,0 +1,83 @@
+import type { EventChartInput } from '@core/types/EventChartInput'
+
+import { useI18n } from '#imports'
+
+export const useBasicEventStatistics = () => {
+  const { t } = useI18n()
+
+  const router = useRouter()
+  const route = useRoute()
+  const timeRange = useRouteQuery<'1h' | '24h' | '30d' | '365d'>('range', '30d', { route, router })
+
+  const { timeseries: startSeries, timeseriesIsLoading: startIsLoading } = useEventTimeseries({
+    eventName: 'StartEvent',
+    timeRange,
+  })
+
+  const { timeseries: allSeries, timeseriesIsLoading: allIsLoading } = useEventTimeseries({
+    timeRange,
+  })
+
+  const { timeseries: stopSeries, timeseriesIsLoading: stopIsLoading } = useEventTimeseries({
+    eventName: 'StopEvent',
+    timeRange,
+  })
+
+  const { timeseries: hitlSeries, timeseriesIsLoading: hitlIsLoading } = useEventTimeseries({
+    eventName: 'HumanInTheLoopRequestEvent',
+    timeRange,
+  })
+
+  const { timeseries: bitlSeries, timeseriesIsLoading: bitlIsLoading } = useEventTimeseries({
+    eventName: 'BotInTheLoopRequestEvent',
+    timeRange,
+  })
+
+  const { timeseries: aitlSeries, timeseriesIsLoading: aitlIsLoading } = useEventTimeseries({
+    eventName: 'AgentInTheLoopRequestEvent',
+    timeRange,
+  })
+
+  const { timeseries: exceptionSeries, timeseriesIsLoading: exstepsionIsLoading } = useEventTimeseries({
+    eventName: 'ExceptionEvent',
+    timeRange,
+  })
+
+  const charts = computed<EventChartInput[]>(() => [
+    {
+      title: t('event.statistics.charts.agentInvocations'),
+      isLoading: startIsLoading.value,
+      timeseriesInputs: [
+        { name: t('event.statistics.charts.agentStart'), color: 'var(--p-surface-600)', timeseries: startSeries.value },
+      ],
+    },
+    {
+      title: t('event.statistics.charts.endEvents'),
+      isLoading: stopIsLoading.value || exstepsionIsLoading.value || hitlIsLoading.value || bitlIsLoading.value,
+      timeseriesInputs: [
+        { name: t('event.statistics.charts.success'), color: 'var(--p-green-600)', timeseries: stopSeries.value },
+        { name: t('event.statistics.charts.openHumanInTheLoop'), color: 'var(--p-yellow-500)', timeseries: hitlSeries.value },
+        { name: t('event.statistics.charts.openBotInTheLoop'), color: 'var(--p-yellow-600)', timeseries: bitlSeries.value },
+        { name: t('event.statistics.charts.error'), color: 'var(--p-red-600)', timeseries: exceptionSeries.value },
+      ],
+    },
+    {
+      title: t('event.statistics.charts.delegations'),
+      isLoading: aitlIsLoading.value,
+      timeseriesInputs: [
+        { name: t('event.statistics.charts.delegatedTaskAgentInTheLoop'), color: 'var(--p-blue-600)', timeseries: aitlSeries.value },
+      ],
+    },
+    {
+      title: t('event.statistics.charts.allEvents'),
+      isLoading: allIsLoading.value,
+      timeseriesInputs: [
+        { name: t('event.statistics.charts.allEvents'), color: 'var(--p-surface-600)', timeseries: allSeries.value },
+      ],
+    },
+  ])
+  return {
+    timeRange,
+    charts,
+  }
+}

package/composables/event/useEventColor.ts

@@ -0,0 +1,25 @@
+const EVENT_COLOR_PALETTE = [
+  '#34d399', '#fbbf24', '#60a5fa', '#c084fc', '#f87171',
+  '#fb923c', '#2dd4bf', '#a78bfa', '#f472b6', '#facc15',
+  '#4ade80', '#38bdf8', '#e879f9', '#a3e635', '#818cf8',
+]
+
+const FALLBACK_COLOR = '#94a3b8'
+
+const hashString = (str: string): number => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i)
+    hash = hash & hash
+  }
+  return Math.abs(hash)
+}
+
+export const useEventColor = () => {
+  const getEventColor = (eventName: string): string => {
+    if (!eventName) return FALLBACK_COLOR
+    return EVENT_COLOR_PALETTE[hashString(eventName) % EVENT_COLOR_PALETTE.length]
+  }
+
+  return { getEventColor }
+}

package/composables/event/useEventComponent.ts

@@ -0,0 +1,87 @@
+import type { ContextualizedAgentEvent } from '@core/sdk/client'
+
+import {
+  EventDisplayAgentInTheLoopRequestEvent,
+  EventDisplayAgentInTheLoopResponseEvent,
+  EventDisplayChunkEvent,
+  EventDisplayEmbeddingEvent,
+  EventDisplayHumanInTheLoopRequestEvent,
+  EventDisplayHumanInTheLoopResponseEvent,
+  EventDisplayLLMCostEvent,
+  EventDisplayLLMEvent,
+  EventDisplayLimitChatHistoryEvent,
+  EventDisplayRerankerEvent,
+  EventDisplayRetrieverEvent,
+  EventDisplayStandaloneQuestionCondenserEvent,
+  EventDisplayRAGSuccessStopEvent,
+  EventDisplayRAGFailureStopEvent,
+  EventDisplayStopEvent,
+  EventDisplayThoughtEvent,
+  EventDisplayToolEvent,
+  EventDisplayUnknownEvent,
+  EventDisplayUserMessageEvent,
+  EventDisplayRAGStartEvent,
+  EventDisplayGuardEvent,
+  EventDisplayGuardAcceptEvent,
+  EventDisplayGuardRejectionEvent,
+  EventDisplayRouterEvent,
+  EventDisplayExceptionEvent,
+  EventDisplayBaseRetrieveMemoryEvent,
+  EventDisplayBaseStoreMemoryEvent,
+  EventDisplayAddMemoryToChatHistoryEvent,
+} from '#components'
+
+export const useEventComponent = () => {
+  const resolveComponentForEvent = (event: ContextualizedAgentEvent) => {
+    const mapping = {
+      UserMessageEvent: EventDisplayUserMessageEvent,
+      RAGStartEvent: EventDisplayRAGStartEvent,
+      ChunkEvent: EventDisplayChunkEvent,
+      LLMEvent: EventDisplayLLMEvent,
+      LLMCostEvent: EventDisplayLLMCostEvent,
+      LimitChatHistoryEvent: EventDisplayLimitChatHistoryEvent,
+      ThoughtEvent: EventDisplayThoughtEvent,
+      EmbeddingEvent: EventDisplayEmbeddingEvent,
+      RerankerEvent: EventDisplayRerankerEvent,
+      RetrieverEvent: EventDisplayRetrieverEvent,
+      StandaloneQuestionCondenserEvent: EventDisplayStandaloneQuestionCondenserEvent,
+      ToolEvent: EventDisplayToolEvent,
+      AgentInTheLoopRequestEvent: EventDisplayAgentInTheLoopRequestEvent,
+      AgentInTheLoopResponseEvent: EventDisplayAgentInTheLoopResponseEvent,
+      HumanInTheLoopRequestEvent: EventDisplayHumanInTheLoopRequestEvent,
+      HumanInTheLoopResponseEvent: EventDisplayHumanInTheLoopResponseEvent,
+      GuardEvent: EventDisplayGuardEvent,
+      GuardAcceptEvent: EventDisplayGuardAcceptEvent,
+      GuardRejectionEvent: EventDisplayGuardRejectionEvent,
+      AgentSuitabilityAcceptEvent: EventDisplayGuardAcceptEvent,
+      AgentSuitabilityRejectEvent: EventDisplayGuardRejectionEvent,
+      ContextSufficientAcceptEvent: EventDisplayGuardAcceptEvent,
+      ContextInsufficientRejectEvent: EventDisplayGuardRejectionEvent,
+      FewShotAcceptEvent: EventDisplayGuardAcceptEvent,
+      FewShotRejectEvent: EventDisplayGuardRejectionEvent,
+      SensitiveInfoAcceptEvent: EventDisplayGuardAcceptEvent,
+      SensitiveInfoRejectEvent: EventDisplayGuardRejectionEvent,
+      RAGSuccessStopEvent: EventDisplayRAGSuccessStopEvent,
+      RAGFailureStopEvent: EventDisplayRAGFailureStopEvent,
+      StopEvent: EventDisplayStopEvent,
+      RouterEvent: EventDisplayRouterEvent,
+      ExceptionEvent: EventDisplayExceptionEvent,
+      BaseRetrieveMemoryEvent: EventDisplayBaseRetrieveMemoryEvent,
+      BaseStoreMemoryEvent: EventDisplayBaseStoreMemoryEvent,
+      AddMemoryToChatHistoryEvent: EventDisplayAddMemoryToChatHistoryEvent,
+    }
+    const exact_match = mapping[event.event._event_name]
+    if (exact_match) {
+      return exact_match
+    }
+    for (const eventName in mapping) {
+      if (event.event._parent_event_names.includes(eventName)) {
+        return mapping[eventName]
+      }
+    }
+    return EventDisplayUnknownEvent
+  }
+  return {
+    resolveComponentForEvent,
+  }
+}

package/composables/event/useEventTimeseries.ts

@@ -0,0 +1,39 @@
+import {
+  type EventTimeseries,
+  getAgentEventTimeseries,
+} from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useEventTimeseries = ({ eventName, timeRange, agentClass, agentId }: { eventName?: string, timeRange: Ref<string>, agentClass?: string, agentId?: string }) => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const query = {
+    agent_class: agentClass ?? route?.params?.agent_class,
+    agent_id: agentId ?? route?.params?.agent_id,
+    thread_id: route?.params?.thread_id,
+    event_name: eventName,
+  }
+  const { data: timeseries, isPending: timeseriesIsLoading } = useQuery<EventTimeseries>({
+    key: () => ['tenant', tenantId.value, 'events', 'agents', 'timeseries', timeRange.value, query],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getAgentEventTimeseries({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          time_range: timeRange.value,
+        },
+        query,
+      })
+    },
+  })
+
+  return {
+    timeseries,
+    timeseriesIsLoading,
+    timeRange,
+  }
+}

package/composables/event/useEventTimeseriesStats.ts

@@ -0,0 +1,26 @@
+import type { EventBucket, EventTimeseries } from '@core/sdk/client'
+
+export const useEventTimeseriesStats = (timeseries: EventTimeseries) => {
+  const sum = computed(() => {
+    return timeseries.buckets.reduce((sum, bucket: EventBucket) => sum + bucket.total_events, 0)
+  })
+
+  const isTrendingUp = computed<boolean>(() => {
+    const localBuckets = timeseries.buckets
+    if (!localBuckets || localBuckets.length < 2) return false
+
+    const halfwayIndex = Math.floor(localBuckets.length / 2)
+    const firstHalfBuckets = localBuckets.slice(0, halfwayIndex)
+    const secondHalfBuckets = localBuckets.slice(halfwayIndex)
+
+    const sum1 = firstHalfBuckets.reduce((sum, bucket: EventBucket) => sum + (bucket.total_events || 0), 0)
+    const sum2 = secondHalfBuckets.reduce((sum, bucket: EventBucket) => sum + (bucket.total_events || 0), 0)
+
+    return sum2 > sum1
+  })
+
+  return {
+    sum,
+    isTrendingUp,
+  }
+}

package/composables/file/useFileUpload.ts

@@ -0,0 +1,91 @@
+import {
+  initiateDocumentUpload,
+  validateDocumentUpload,
+  type DocumentUploadRequest,
+  type DocumentUploadValidationRequest,
+} from '@core/sdk/client'
+
+export interface UploadFileOptions {
+  filename: string
+  file: File
+  namespace: string
+  database: string
+  tenantId: string
+  onProgress?: () => void
+}
+
+// Map extensions to MIME types for files where browser fails
+const MIME_TYPE_OVERRIDES: Record<string, string> = {
+  '.md': 'text/markdown',
+  '.markdown': 'text/markdown',
+}
+
+const getMimeType = (file: File): string => {
+  if (file.type) {
+    return file.type
+  }
+
+  const ext = '.' + (file.name.split('.').pop()?.toLowerCase() ?? '')
+  return MIME_TYPE_OVERRIDES[ext] || 'application/octet-stream'
+}
+
+export const useFileUpload = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: uploadFileMutation } = useMutation({
+    mutation: async (options: UploadFileOptions) => {
+      const { filename, file, namespace, database, tenantId } = options
+
+      const contentType = getMimeType(file)
+
+      const initiateRequest: DocumentUploadRequest = {
+        filename,
+        content_type: contentType,
+        content_length: file.size,
+      }
+
+      const initiateResponse = await initiateDocumentUpload({
+        composable: '$fetch',
+        body: initiateRequest,
+        path: {
+          tenant_id: tenantId,
+          database,
+          namespace,
+        },
+      })
+
+      await fetch(initiateResponse.upload_url, {
+        method: 'PUT',
+        body: file,
+        headers: {
+          'Content-Type': contentType,
+        },
+      })
+
+      const validationRequest: DocumentUploadValidationRequest = {
+        file_path: initiateResponse.object_key,
+      }
+
+      await validateDocumentUpload({
+        composable: '$fetch',
+        body: validationRequest,
+        path: {
+          tenant_id: tenantId,
+          database,
+          namespace,
+        },
+      })
+
+      return initiateResponse.upload_id
+    },
+    onSuccess: (data, variables) => {
+      queryCache.invalidateQueries({
+        key: ['tenant', variables.tenantId, 'knowledge'],
+      })
+    },
+  })
+
+  return {
+    uploadFile: uploadFileMutation,
+  }
+})

package/composables/file/useSupportedFileTypes.ts

@@ -0,0 +1,22 @@
+import { getSupportedFileTypes } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useSupportedFileTypes = defineQuery(() => {
+  const { tenantId } = useTenant()
+
+  const { data: supportedFileTypes } = useQuery<string[]>({
+    key: () => ['tenant', tenantId.value, 'supportedFileTypes'],
+    staleTime: minutesToMilliseconds(60),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getSupportedFileTypes({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+      })
+    },
+  })
+
+  return {
+    supportedFileTypes,
+  }
+})

package/composables/form/useCreateInstanceForm.ts

@@ -0,0 +1,251 @@
+import { merge } from 'lodash-es'
+
+import {
+  type FormElement,
+  type GroupConfig,
+  type RepeaterConfig,
+  buildFormKitSchema,
+  categorizeFormElements,
+  coerceNullableToggles,
+  extractGroupConfigs,
+  extractRepeaterConfigs,
+  getFormkitType,
+  getNestedValue,
+  seedFormDefaults,
+  seedNullableToggles,
+  setNestedValue,
+} from './useFormKitTransform'
+
+import type { FormKitSchemaNode } from '@formkit/core'
+import type { Ref } from 'vue'
+
+export interface ClassDataLike {
+  form: unknown[]
+  templates?: Array<Record<string, unknown>>
+}
+
+/**
+ * Drops keys whose matching form-schema node is a group/repeater and whose incoming
+ * value is `null`. FormKit rejects `null` for group values (must be an object) and for
+ * repeater values (must be an array), so template payloads that serialise optional
+ * nested configs as `null` (Pydantic `Form | None = None`) would otherwise throw during
+ * hydration.
+ */
+export function stripNullsForGroups(
+  data: Record<string, unknown>,
+  elements: FormElement[],
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+
+  for (const [key, value] of Object.entries(data)) {
+    const element = elements.find(el => el.name === key)
+    if (!element) {
+      result[key] = value
+      continue
+    }
+    const formkitType = getFormkitType(element)
+
+    if ((formkitType === 'group' || formkitType === 'repeater') && value === null) {
+      continue
+    }
+
+    const children = (element.children as FormElement[] | undefined) ?? []
+
+    if (formkitType === 'group' && value && typeof value === 'object' && !Array.isArray(value)) {
+      result[key] = stripNullsForGroups(value as Record<string, unknown>, children)
+    }
+    else if (formkitType === 'repeater' && Array.isArray(value)) {
+      result[key] = value.map(item =>
+        item && typeof item === 'object' && !Array.isArray(item)
+          ? stripNullsForGroups(item as Record<string, unknown>, children)
+          : item,
+      )
+    }
+    else {
+      result[key] = value
+    }
+  }
+
+  return result
+}
+
+export interface CreateInstanceFormOptions<T extends ClassDataLike> {
+  /** Reactive list of available class definitions (agent classes, process classes, etc.) */
+  classes: Ref<T[] | undefined>
+  /** Property name used to identify a class (e.g. 'agent_class', 'process_class') */
+  classField: string
+  /** Property name used as fallback label in templates (e.g. 'agent_id', 'process_id') */
+  idField: string
+  /** Getter for the initial class selection (from component props) */
+  initialClass: () => string
+  /** Current locale ref for i18n-aware form rendering */
+  locale: Ref<string>
+}
+
+/**
+ * Shared form logic for creating agent/process instances from class definitions.
+ *
+ * Handles class selection, FormKit schema generation, stepper navigation,
+ * and form data lifecycle. Template/clone pre-filling is done via applyInitialData().
+ * Domain-specific submission logic stays in the calling component.
+ */
+export function useCreateInstanceForm<T extends ClassDataLike>(options: CreateInstanceFormOptions<T>) {
+  const { classes, classField, initialClass, locale } = options
+
+  const selectedClass = ref<string>(initialClass())
+  const formData = ref<Record<string, unknown>>({})
+  const activeStep = ref(0)
+
+  watch(initialClass, (newClass) => {
+    if (newClass) {
+      selectedClass.value = newClass
+    }
+  })
+
+  const selectedClassData = computed<T | undefined>(() => {
+    if (!selectedClass.value || !classes.value) return undefined
+    return classes.value.find(c => c[classField as keyof T] === selectedClass.value)
+  })
+
+  const configForm = computed(() => selectedClassData.value?.form ?? [])
+
+  const categorizedElements = computed(() => {
+    return categorizeFormElements(configForm.value as FormElement[])
+  })
+
+  const simpleElementsSchema = computed<FormKitSchemaNode[]>(() => {
+    return buildFormKitSchema(categorizedElements.value.simpleElements, { locale: locale.value })
+  })
+
+  const groupConfigs = computed<GroupConfig[]>(() => {
+    return extractGroupConfigs(configForm.value as FormElement[], locale.value)
+  })
+
+  const repeaterConfigs = computed<RepeaterConfig[]>(() => {
+    return extractRepeaterConfigs(configForm.value as FormElement[], locale.value)
+  })
+
+  const hasSimpleElements = computed(() => simpleElementsSchema.value.length > 0)
+
+  function getGroupStepIndex(groupIndex: number): number {
+    return (hasSimpleElements.value ? 1 : 0) + groupIndex
+  }
+
+  function getRepeaterStepIndex(repeaterIndex: number): number {
+    return (hasSimpleElements.value ? 1 : 0) + groupConfigs.value.length + repeaterIndex
+  }
+
+  function getRepeaterData(path: string): Record<string, unknown>[] {
+    return getNestedValue(formData.value, path)
+  }
+
+  function setRepeaterData(path: string, value: Record<string, unknown>[]): void {
+    setNestedValue(formData.value, path, value)
+  }
+
+  watch(selectedClassData, (newClass) => {
+    if (newClass?.form && newClass.form.length > 0) {
+      const base = initializeGroupData(configForm.value as FormElement[], {})
+      formData.value = seedFormDefaults(base, configForm.value as FormElement[])
+    }
+    else {
+      formData.value = {}
+    }
+  }, { immediate: true })
+
+  function initializeElementData(
+    element: FormElement,
+    result: Record<string, unknown>,
+    recursiveFn: (elements: FormElement[], data: Record<string, unknown>) => Record<string, unknown>,
+  ): void {
+    const formkitType = getFormkitType(element)
+    const name = element.name as string
+    const children = element.children as FormElement[] | undefined
+    const hasChildren = children && Array.isArray(children)
+
+    if (formkitType === 'group') {
+      result[name] = result[name] ?? {}
+      if (hasChildren) {
+        result[name] = recursiveFn(children, result[name] as Record<string, unknown>)
+      }
+    }
+    else if (formkitType === 'repeater') {
+      result[name] = result[name] ?? []
+      if (Array.isArray(result[name]) && hasChildren) {
+        result[name] = (result[name] as Record<string, unknown>[]).map(item => recursiveFn(children, item))
+      }
+    }
+  }
+
+  function initializeGroupData(
+    formElements: FormElement[],
+    data: Record<string, unknown>,
+  ): Record<string, unknown> {
+    const result = { ...data }
+    for (const element of formElements) {
+      initializeElementData(element, result, initializeGroupData)
+    }
+    return result
+  }
+
+  function cleanFormData(data: Record<string, unknown>): Record<string, unknown> {
+    const result: Record<string, unknown> = {}
+    // FormKit artifacts that should be stripped from submissions
+    const formkitArtifacts = new Set(['slots'])
+
+    for (const [key, value] of Object.entries(data)) {
+      if (formkitArtifacts.has(key)) continue
+      // Strip the internal repeater validation mirror written by FormKit/Repeater.vue.
+      if (key.startsWith('__validate__')) continue
+
+      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        result[key] = cleanFormData(value as Record<string, unknown>)
+      }
+      else {
+        result[key] = value
+      }
+    }
+
+    return result
+  }
+
+  function applyInitialData(data: Record<string, unknown>) {
+    // Seed toggles from the raw data so that `field: null` in a template becomes
+    // `__field__enabled: false`. If we seeded after stripping nulls and merging
+    // against the `{}` placeholder from initializeGroupData, every nullable group
+    // would look truthy and the toggle would come up enabled.
+    const seeded = seedNullableToggles(data, configForm.value as FormElement[])
+    const base = initializeGroupData(configForm.value as FormElement[], {})
+    const withDefaults = seedFormDefaults(base, configForm.value as FormElement[])
+    const sanitized = stripNullsForGroups(seeded, configForm.value as FormElement[])
+    formData.value = merge(withDefaults, sanitized)
+  }
+
+  function resetForm() {
+    selectedClass.value = initialClass()
+    formData.value = {}
+    activeStep.value = 0
+  }
+
+  return {
+    selectedClass,
+    formData,
+    activeStep,
+    selectedClassData,
+    configForm,
+    categorizedElements,
+    simpleElementsSchema,
+    groupConfigs,
+    repeaterConfigs,
+    hasSimpleElements,
+    getGroupStepIndex,
+    getRepeaterStepIndex,
+    getRepeaterData,
+    setRepeaterData,
+    initializeGroupData,
+    cleanFormData,
+    coerceNullableToggles,
+    applyInitialData,
+    resetForm,
+  }
+}