@swiss-ai-hub/web 0.290.11

package/components/Event/Display/ToolEvent.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <p class="text-2xl font-bold">
+      {{ event.event.name }}
+    </p>
+    <p class="font-bold">
+      {{ event.event.description }}
+    </p>
+    <br>
+    <div class="grid grid-cols-2 gap-4">
+      <InputGroup
+        v-for="(val, key) in event.event.parameters"
+        :key="key"
+      >
+        <Button :label="useChangeCase(key, 'capitalCase')" />
+        <InputText
+          :placeholder="val"
+          readonly
+        />
+      </InputGroup>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { ThreadDto, ToolEvent, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/UnknownEvent.vue

@@ -0,0 +1,17 @@
+<template>
+  <EventDisplayBase
+    is-empty
+    :event="event"
+    :thread="thread"
+    icon="mage:question-mark-circle"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/UserMessageEvent.vue

@@ -0,0 +1,35 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:message"
+    is-external
+  >
+    <div class="flex flex-col gap-8">
+      <div
+        v-for="(message, index) in event.event.messages"
+        :key="index"
+        class="flex flex-col gap-2"
+      >
+        <ChatMessage
+          :message="message"
+          :name="message.role == 'user' ? event.event.user.name : message.role"
+          :email="message.role == 'user' ? event.event.user.email : ''"
+          :date="new Date(event.event.created_at / 1_000_000)"
+          :icon="agentIcon"
+        />
+      </div>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto, UserMessageEvent, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: UserMessageEvent }
+  thread: ThreadDto
+}>()
+
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+</script>

package/components/Event/List/EventList.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="flex flex-col gap-12 pt-4">
+    <Panel
+      v-if="showChat"
+      :header="t('event.list.chat')"
+      toggleable
+    >
+      <div class="flex flex-col gap-8">
+        <ChatThread
+          :events="eventsInRuns"
+          :thread="thread"
+        />
+      </div>
+    </Panel>
+    <div class="flex flex-col gap-8">
+      <div class="grid grid-cols-2 gap-4 px-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="firstInteraction"
+            severity="secondary"
+          />
+        </div>
+        <div class="flex flex-col items-start gap-2">
+          <span class="font-semibold">{{ t('event.list.lastInteraction') }}</span>
+          <Tag
+            :value="lastInteraction"
+            severity="secondary"
+          />
+        </div>
+        <div class="flex flex-col items-start gap-2">
+          <span class="font-semibold">{{ t('event.list.duration') }}</span>
+          <Tag
+            :value="runDuration"
+            severity="secondary"
+          />
+        </div>
+        <div class="flex flex-col items-start gap-2">
+          <span class="font-semibold">{{ t('event.list.costs') }}</span>
+          <Tag
+            :value="totalCost"
+            severity="secondary"
+          />
+        </div>
+      </div>
+      <MeterGroup
+        :value="eventMeterValues"
+        class="px-4"
+      />
+      <div class="flex w-full items-center justify-end gap-2 pr-4">
+        <MultiSelect
+          v-model="activeRuns"
+          display="chip"
+          input-id="agents"
+          :options="display.runs"
+          :option-label="runNameFn"
+        />
+      </div>
+      <Timeline
+        :value="eventsInRuns"
+        data-key="event_id"
+        align="left"
+        class="customized-timeline w-full"
+      >
+        <template #opposite="{ item: event }">
+          <div class="flex w-full flex-row justify-end">
+            <div class="flex flex-col text-xs text-surface-500 dark:text-surface-400">
+              <div class="font-semibold">
+                {{ useDateFormat(event.event.created_at / 1_000_000, 'DD.MM.YYYY') }}
+              </div>
+              <div>{{ useDateFormat(event.event.created_at / 1_000_000, 'hh:mm:ss') }}</div>
+            </div>
+          </div>
+        </template>
+        <template #content="{ item: event }">
+          <div class="w-full pb-12">
+            <component
+              :is="resolveComponentForEvent(event)"
+              :event="event"
+              :thread="thread"
+            />
+          </div>
+        </template>
+        <template #marker>
+          <span
+            class="z-10 flex size-5 items-center justify-center rounded-full border border-surface-100 bg-white text-white shadow-md shadow-surface-200 dark:border-surface-800 dark:bg-surface-700 dark:shadow-surface-950"
+          >
+            <Icon
+              class="text-green-700"
+              name="mage:check"
+              size="xs"
+            />
+          </span>
+        </template>
+      </Timeline>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from 'date-fns'
+import { de } from 'date-fns/locale/de'
+import { enUS } from 'date-fns/locale/en-US'
+import { frCH } from 'date-fns/locale/fr-CH'
+import { itCH } from 'date-fns/locale/it-CH'
+
+import type {
+  DisplayStatistics, RunStatistics,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  events: ContextualizedAgentEvent[]
+  thread: ThreadDto
+  displayId?: string
+  showChat?: boolean
+}>(), {
+  showChat: false,
+})
+
+const route = useRoute()
+const { locale, t } = useI18n()
+
+const localeMap = { de, en: enUS, fr: frCH, it: itCH } as const
+
+const activeRuns = ref<RunStatistics[]>([])
+
+const display = computed(() => {
+  const displayId = props.displayId ?? route.params.display_id
+  return props.thread.displays?.find((display: DisplayStatistics) => display.display_id === displayId)
+})
+
+watch(display, () => {
+  activeRuns.value = display.value?.runs ?? []
+}, { immediate: true })
+
+const eventsInRuns = computed<ContextualizedAgentEvent[]>(() => {
+  const runIds = new Set(activeRuns.value.map((run: RunStatistics) => run.run_id))
+  return props.events.filter((event: ContextualizedAgentEvent) => runIds.has(event.run_id))
+})
+
+const { resolveComponentForEvent } = useEventComponent()
+
+const runNameFn = (run: RunStatistics) => run.agent.agent_config.name
+
+const getEventTimestamp = (event: AgentEventReadable): number =>
+  (event.event as { created_at?: number }).created_at ?? 0
+
+const sortedEvents = computed(() =>
+  [...eventsInRuns.value].sort((a, b) => getEventTimestamp(a) - getEventTimestamp(b)),
+)
+
+const firstInteraction = computed<string>(() => {
+  if (!sortedEvents.value.length) return '-'
+  const ts = getEventTimestamp(sortedEvents.value[0])
+  if (!ts) return '-'
+  return useDateFormat(ts / 1_000_000, 'DD.MM.YYYY HH:mm:ss').value
+})
+
+const lastInteraction = computed<string>(() => {
+  if (!sortedEvents.value.length) return '-'
+  const ts = getEventTimestamp(sortedEvents.value[sortedEvents.value.length - 1])
+  if (!ts) return '-'
+  return useDateFormat(ts / 1_000_000, 'DD.MM.YYYY HH:mm:ss').value
+})
+
+const runDuration = computed<string>(() => {
+  const events = sortedEvents.value
+  if (events.length < 2) return '-'
+  const startNs = getEventTimestamp(events[0])
+  const endNs = getEventTimestamp(events[events.length - 1])
+  const startMs = startNs / 1_000_000
+  const endMs = endNs / 1_000_000
+  const dur = intervalToDuration({ start: new Date(startMs), end: new Date(endMs) })
+  if (dur.minutes || dur.hours || dur.days) dur.seconds = 0
+  if (dur.days || dur.weeks) dur.minutes = 0
+  return formatDuration(dur, { locale: localeMap[locale.value as keyof typeof localeMap] }) || '< 1s'
+})
+
+const totalCost = computed<string>(() => {
+  let cost = 0
+  for (const event of eventsInRuns.value) {
+    if (event._event_name !== 'LLMCostEvent' && !(event._parent_event_names as string[])?.includes('LLMCostEvent')) continue
+    const e = event.event as { prompt_tokens_costs?: number, completion_tokens_costs?: number, embedding_tokens_costs?: number }
+    cost += (e.prompt_tokens_costs ?? 0) + (e.completion_tokens_costs ?? 0) + (e.embedding_tokens_costs ?? 0)
+  }
+  return `${cost.toFixed(6)} CHF`
+})
+
+const { getEventColor } = useEventColor()
+
+const eventMeterValues = computed(() => {
+  const sorted = sortedEvents.value
+  if (sorted.length < 2) return []
+
+  const durations = new Map<string, { label: string, duration: number }>()
+  for (let i = 1; i < sorted.length; i++) {
+    const curr = sorted[i]
+    const prev = sorted[i - 1]
+    const delta = getEventTimestamp(curr) - getEventTimestamp(prev)
+    const name = curr.event_display_name as string ?? curr._event_name
+
+    const existing = durations.get(name)
+    if (existing) {
+      existing.duration += delta
+    }
+    else {
+      durations.set(name, { label: name, duration: delta })
+    }
+  }
+
+  const totalDuration = Array.from(durations.values()).reduce((sum, e) => sum + e.duration, 0)
+  if (totalDuration === 0) return []
+
+  const MIN_DURATION_NS = 100_000_000 // 0.1s in nanoseconds
+  const insertionOrder = Array.from(durations.keys())
+  const entries = Array.from(durations.values())
+    .filter(e => e.duration >= MIN_DURATION_NS)
+    .sort((a, b) => insertionOrder.indexOf(a.label) - insertionOrder.indexOf(b.label))
+
+  const rawValues = entries.map(e => (e.duration / totalDuration) * 100)
+  const floored = rawValues.map(v => Math.floor(v))
+  let remainder = 100 - floored.reduce((sum, v) => sum + v, 0)
+  const fractionals = rawValues.map((v, i) => ({ i, frac: v - floored[i] }))
+    .sort((a, b) => b.frac - a.frac)
+  for (const { i } of fractionals) {
+    if (remainder <= 0) break
+    floored[i]++
+    remainder--
+  }
+
+  return entries.map((entry, index) => ({
+    label: entry.label,
+    value: floored[index],
+    color: getEventColor(entry.label),
+  }))
+})
+</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/Event/Statistics.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="flex w-full flex-col gap-8"
+  >
+    <div class="flex w-full justify-end">
+      <SelectButton
+        :model-value="modelValue"
+        size="small"
+        :options="options"
+        :allow-empty="false"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </div>
+    <div
+      class="grid w-full grid-cols-1 lg:grid-cols-2"
+    >
+      <div
+        v-for="(chart, index) in charts"
+        :key="index"
+        class="flex h-[350px] w-full items-center justify-center"
+      >
+        <EventTimeseries
+          v-if="!chart.isLoading"
+          :title="chart.title"
+          :series-inputs="chart.timeseriesInputs"
+        />
+        <ProgressSpinner
+          v-else
+          class="size-12"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { EventChartInput } from '@core/types/EventChartInput'
+
+defineProps<{
+  modelValue: string
+  charts: EventChartInput[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+}>()
+
+const options = ref<string[]>(['1h', '24h', '30d', '365d'])
+</script>

package/components/Event/Timeseries.vue

@@ -0,0 +1,224 @@
+<template>
+  <ClientOnly>
+    <VueApexChart
+      class="w-full"
+      type="bar"
+      :height="height"
+      :options="chartOptions"
+      :series="chartSeries"
+    />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import VueApexChart from 'vue3-apexcharts'
+
+import type { EventBucket } from '@core/sdk/client'
+import type { TimeseriesInput } from '@core/types/TimeseriesInput'
+import type { ApexOptions } from 'apexcharts'
+
+const props = withDefaults(defineProps<{
+  title: string
+  seriesInputs: TimeseriesInput[]
+  height?: number
+}>(), {
+  height: 350,
+})
+
+const { t } = useI18n()
+const isDark = useDarkMode()
+
+const chartSeries = computed(() => {
+  if (!props.seriesInputs || props.seriesInputs.length === 0) {
+    return []
+  }
+
+  return props.seriesInputs
+    .map(input => ({
+      name: input.name,
+      data: input.timeseries?.buckets?.map(bucket => bucket.total_events || 0) ?? [],
+    }))
+    .filter(series => series.data.some(value => value > 0))
+})
+
+const chartOptions = computed<ApexOptions>(() => {
+  const representativeTimeseries = props.seriesInputs?.find(s => s.timeseries?.buckets?.length > 0)?.timeseries
+
+  if (!representativeTimeseries) {
+    // Fallback options if no data is available to derive categories, etc.
+    return {
+      chart: {
+        type: 'bar',
+        height: props.height,
+        foreColor: isDark.value ? 'var(--p-surface-200)' : 'var(--p-surface-800)',
+      },
+      theme: {
+        mode: isDark.value ? 'dark' : 'light',
+      },
+      noData: {
+        text: t('chart.no_data'),
+        align: 'center',
+        verticalAlign: 'middle',
+        style: {
+          fontSize: '14px',
+        },
+      },
+      yaxis: {
+        title: {
+          text: `# ${props.title}`,
+        },
+      },
+      legend: {
+        show: false,
+      },
+    }
+  }
+
+  const { buckets, time_range, resolution } = representativeTimeseries
+
+  // Generate categories for the X-axis from bucket start times
+  const categories = buckets.map((bucket: EventBucket) => {
+    const date = new Date(bucket.start_time)
+    return date.toISOString()
+  })
+
+  const activeSeriesColors = props.seriesInputs
+    .filter(input =>
+      input.timeseries.buckets.some(bucket => (bucket.total_events || 0) > 0) && input.color,
+    )
+    .map(input => input.color!)
+
+  const getXAxisLabelFormatter = () => {
+    return (value: string, _: string, opts?: { i?: number }) => {
+      const date = new Date(value)
+      const dataPointIndex = opts?.i ?? 0
+
+      // Determine max labels based on time range to avoid clutter
+      let maxLabels = 31 // For 1 month, all days have labels, for 1 year, each month has exactly 12 labels
+      if (time_range === '1h') maxLabels = 12 // e.g., every 5 minutes for 1 hour
+      else if (time_range === '24h') maxLabels = 8 // e.g., every 3 hours for 24 hours
+
+      const totalDataPoints = categories.length
+      const skipInterval = Math.max(1, Math.ceil(totalDataPoints / maxLabels))
+
+      if (dataPointIndex % skipInterval !== 0 && dataPointIndex !== totalDataPoints - 1) {
+        return ''
+      }
+
+      // Format date based on time range
+      if (time_range === '1h' || time_range === '24h') {
+        const options: Intl.DateTimeFormatOptions = {
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: false,
+        }
+        return date.toLocaleTimeString('de-CH', options)
+      }
+      return date.toLocaleDateString('de-CH', { month: 'short', day: '2-digit' })
+    }
+  }
+
+  return {
+    chart: {
+      type: 'bar',
+      height: props.height,
+      stacked: true,
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      foreColor: isDark.value ? 'var(--p-surface-200)' : 'var(--p-surface-800)',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: resolution === '1m' ? '80%' : '50%',
+        dataLabels: {
+          total: {
+            enabled: true,
+            style: {
+              fontSize: '13px',
+              fontWeight: 900,
+              color: isDark.value ? 'var(--p-surface-200)' : 'var(--p-surface-800)',
+            },
+          },
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          legend: {
+            position: 'bottom',
+            offsetX: -10,
+            offsetY: 0,
+          },
+        },
+      },
+    ],
+    xaxis: {
+      type: 'category',
+      categories: categories,
+      labels: {
+        formatter: getXAxisLabelFormatter(),
+        rotate: -45,
+        rotateAlways: true,
+        hideOverlappingLabels: false,
+        trim: true,
+        style: {
+          fontSize: '10px',
+        },
+      },
+    },
+    yaxis: {
+      title: {
+        text: `# ${props.title}`,
+        offsetX: 5,
+      },
+      min: 0,
+      labels: {
+        formatter: (value: number) => Number.isInteger(value) ? String(value) : '',
+      },
+      tickAmount: 5,
+      forceNiceScale: true,
+    },
+    legend: {
+      show: true,
+      showForSingleSeries: true,
+      position: 'top',
+      offsetY: 0,
+    },
+    fill: {
+      opacity: 1,
+    },
+    tooltip: {
+      theme: isDark.value ? 'dark' : 'light',
+      x: {
+        formatter: (value: string) => {
+          const date = new Date(value)
+          if (time_range === '1h' || time_range === '24h') {
+            return date.toLocaleString('de-CH', { dateStyle: 'medium', timeStyle: 'medium', hour12: false })
+          }
+          return date.toLocaleDateString('de-CH', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })
+        },
+      },
+    },
+    colors: activeSeriesColors.length > 0 ? activeSeriesColors : undefined,
+    noData: {
+      text: t('chart.no_data'),
+      align: 'center',
+      verticalAlign: 'middle',
+      style: {
+        fontSize: '14px',
+      },
+    },
+  }
+})
+</script>