@swiss-ai-hub/web 0.290.11

package/components/Chat/Message.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="flex w-full"
+    :class="justifyClass"
+  >
+    <div
+      class="flex max-w-[80%] gap-2"
+      :class="flowClass"
+    >
+      <Avatar
+        size="large"
+        :shape="message.role == 'user' ? 'circle' : 'square'"
+        class="shrink-0"
+        :image="image"
+        :class="{ 'bg-surface-800 text-white dark:bg-surface-200 dark:text-black': message.role == 'user' }"
+      >
+        <Icon
+          v-if="icon"
+          :name="message.role == 'user' ? 'mage:user' : icon"
+          size="xl"
+        />
+      </Avatar>
+      <div class="flex w-full flex-col">
+        <div
+          class="mb-1 line-clamp-1 flex items-center gap-2 text-black dark:text-white"
+          :class="justifyClass"
+        >
+          <p class="text-sm font-bold">
+            {{ name }}
+          </p>
+          <p class="text-xs">
+            {{ email }}
+          </p>
+        </div>
+        <div
+          class="mb-1 w-full max-w-[90%] rounded-3xl bg-surface-50 px-5 pb-4 pt-2 text-lg dark:bg-surface-850"
+        >
+          <div
+            v-for="(block, index) in message.blocks"
+            :key="index"
+            :class="{
+              'cursor-pointer': isClickable,
+              'hover:opacity-80 hover:shadow-md': isClickable,
+              '': message.role == 'user',
+            }"
+          >
+            <MarkdownRenderer
+              v-if="block?.block_type === 'text'"
+              :md="block.text"
+            />
+            <img
+              v-if="block?.block_type === 'image'"
+              :src="block.url"
+            >
+          </div>
+        </div>
+
+        <span
+          v-if="props.date"
+          class="ml-0.5 flex w-full translate-y-px text-xs font-medium text-surface-400"
+        >
+          {{ useDateFormat(props.date, 'DD.MM.YYYY HH:mm:ss') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { ChatMessage } from '@core/sdk/client'
+
+const props = defineProps<{
+  message: ChatMessage
+  name: string
+  email?: string
+  date?: Date
+  image?: string
+  icon?: string
+  isClickable?: boolean
+}>()
+
+const justifyClass = computed<string[]>(() => {
+  return [props.message.role === 'user' ? 'justify-end' : 'justify-start']
+})
+const flowClass = computed<string[]>(() => {
+  return [props.message.role === 'user' ? 'flex-row-reverse' : 'flex-row']
+})
+</script>

package/components/Chat/SourceNodes.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center gap-6 text-sm text-surface-600 dark:text-surface-400">
+      <div class="flex items-center gap-2">
+        <Icon
+          name="mage:file"
+          class="size-4"
+        />
+        <span>{{ t('event.retriever.sourceDocument', documentCount) }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <Icon
+          name="mage:checklist"
+          class="size-4"
+        />
+        <span>{{ t('event.retriever.contentChunk', totalNodeCount) }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="totalNodeCount === 0"
+      class="flex flex-col items-center gap-3 rounded-lg p-8 text-center"
+    >
+      <Icon
+        name="mage:cancel"
+        class="size-8 text-surface-400"
+      />
+      <div>
+        <p class="font-medium text-surface-700 dark:text-surface-300">
+          {{ t('event.retriever.noChunksFound') }}
+        </p>
+        <p class="text-sm text-surface-500 dark:text-surface-400">
+          {{ t('event.retriever.noChunksFoundDescription') }}
+        </p>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="flex flex-col gap-3"
+    >
+      <div
+        v-for="(documentNodes, doc) in nodesByDocument"
+        :key="doc"
+        class="rounded-lg border border-surface-200 dark:border-surface-700"
+      >
+        <div
+          v-if="getDocumentTitle(documentNodes)"
+          class="flex items-center justify-between border-b border-surface-100 px-4 py-3 dark:border-surface-700"
+        >
+          <div class="flex items-center gap-2">
+            <Icon
+              name="mage:file"
+              class="size-4 text-surface-500"
+            />
+            <h3 class="font-medium text-surface-700 dark:text-surface-300">
+              {{ getDocumentTitle(documentNodes) }}
+            </h3>
+          </div>
+          <span class="text-xs text-surface-500 dark:text-surface-400">
+            {{ t('event.retriever.chunksFromDoc', documentNodes.length) }}
+          </span>
+        </div>
+
+        <div class="p-4">
+          <div class="flex flex-col gap-3">
+            <KnowledgeNodeContent
+              v-for="node in documentNodes"
+              :key="node.id"
+              :node="node"
+              :always-show-score="true"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IngestedNode } from '@core/sdk/client'
+
+const props = defineProps<{
+  nodes: IngestedNode[]
+}>()
+
+const { t } = useI18n()
+
+const nodesByDocument = computed<Record<string, IngestedNode[]>>(() => {
+  const nodeMap: Record<string, IngestedNode[]> = {}
+  props.nodes.forEach((node: IngestedNode) => {
+    if (!(node.document_id in nodeMap)) {
+      nodeMap[node.document_id] = []
+    }
+    nodeMap[node.document_id].push(node)
+  })
+  return nodeMap
+})
+
+const documentCount = computed(() => {
+  return Object.keys(nodesByDocument.value).length
+})
+
+const totalNodeCount = computed(() => {
+  return props.nodes.length
+})
+
+const getDocumentTitle = (nodes: IngestedNode[]): string => {
+  const nodeWithTitle = nodes.find(node => node.document_title?.trim())
+  if (nodeWithTitle?.document_title) {
+    return nodeWithTitle.document_title.trim()
+  }
+
+  const nodeWithSource = nodes.find(node => node.source?.trim())
+  if (nodeWithSource?.source) {
+    return nodeWithSource.source
+  }
+  return ''
+}
+</script>

package/components/Chat/Thread.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <div
+      v-for="(message, index) in messages"
+      :key="index"
+      class="flex flex-col gap-2"
+    >
+      <ChatMessage
+        is-clickable
+        :message="message"
+        :name="message.name"
+        :email="message.email"
+        :date="message.date"
+        :image="message.userImage"
+        :icon="message.icon"
+        @click="() => toDisplay(message)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  ChatMessage,
+  MinimalAgentInstanceDto,
+  ThreadDto,
+  MinimalUserDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  events: ContextualizedAgentEvent[]
+  thread: ThreadDto
+}>()
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+type ExtendedChatMessage = ChatMessage & {
+  name: string
+  email: string
+  date: Date
+  userImage?: string
+  icon?: string
+  displayId: string
+}
+
+const user = computed<MinimalUserDto>(() => props.thread.users.at(-1)!)
+
+const getAgentDto = (agent_class: string, agent_id: string) =>
+  props.thread.participating_agents?.find(
+    (agent: MinimalAgentInstanceDto) =>
+      agent.agent_id === agent_id && agent.agent_class === agent_class,
+  )
+
+const toDisplay = (msg: ExtendedChatMessage) => {
+  router.push(tenantPath(`/service/threads/${props.thread.id}/display/${msg.displayId}`))
+}
+
+const createUserMessage = (
+  blocks: ChatMessage['blocks'],
+  timestamp: number,
+  event: ContextualizedAgentEvent,
+): ExtendedChatMessage => ({
+  role: 'user',
+  blocks,
+  displayId: event.display_id,
+  name: user.value.name,
+  email: user.value.email,
+  userImage: user.value.profile_image,
+  date: new Date(timestamp / 1_000_000),
+})
+
+const createAssistantMessage = (
+  text: string,
+  event: ContextualizedAgentEvent,
+  timestamp: number,
+): ExtendedChatMessage => {
+  const agentDto = getAgentDto(event.agent_class, event.agent_id)
+  return {
+    role: 'assistant',
+    blocks: [{ block_type: 'text', text }],
+    displayId: event.display_id,
+    name: agentDto?.agent_config?.name ?? t('chat.assistant'),
+    email: `${event.agent_class}/${event.agent_id}`,
+    icon: agentDto?.agent_config?.icon,
+    date: new Date(timestamp / 1_000_000),
+  }
+}
+
+const messages = computed<ExtendedChatMessage[]>(() => {
+  const msgs: ExtendedChatMessage[] = []
+
+  for (const event of props.events) {
+    const { _parent_event_names: types, created_at } = event.event
+
+    if (types.includes('UserMessageEvent')) {
+      const blocks = event.event.messages.at(-1)?.blocks ?? []
+      msgs.push(createUserMessage(blocks, created_at, event))
+    }
+
+    else if (types.includes('HumanInTheLoopResponseEvent')) {
+      msgs.push(createUserMessage(
+        [{ block_type: 'text', text: event.event.response }],
+        created_at,
+        event,
+      ))
+    }
+
+    else if (types.includes('ChunkEvent') && event.event.content) {
+      const lastMsg = msgs.at(-1)
+      const isSameAgent = lastMsg?.email === `${event.agent_class}/${event.agent_id}`
+
+      if (isSameAgent && lastMsg?.role === 'assistant') {
+        lastMsg.blocks.push({ block_type: 'text', text: event.event.content })
+      }
+      else {
+        msgs.push(createAssistantMessage(event.event.content, event, created_at))
+      }
+    }
+
+    else if (types.includes('HumanInTheLoopRequestEvent')) {
+      msgs.push(createAssistantMessage(event.event.question, event, created_at))
+    }
+
+    else if (types.includes('ExceptionEvent')) {
+      msgs.push(createAssistantMessage(event.event.message, event, created_at))
+    }
+  }
+
+  return msgs
+})
+</script>

package/components/Costs/Table.vue

@@ -0,0 +1,56 @@
+<template>
+  <table class="w-full table-auto text-left">
+    <thead>
+      <tr>
+        <th />
+        <th>{{ t('costs.table.count') }}</th>
+        <th>{{ t('costs.table.cost') }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="font-bold">
+          {{ t('costs.table.input') }}
+        </td>
+        <td>{{ promptTokenCount }} </td>
+        <td>{{ promptTokensCosts }} {{ t('costs.table.currency') }}</td>
+      </tr>
+      <tr>
+        <td class="font-bold">
+          {{ t('costs.table.output') }}
+        </td>
+        <td>{{ completionTokenCount }}</td>
+        <td>{{ completionTokensCosts }} {{ t('costs.table.currency') }}</td>
+      </tr>
+      <tr v-if="embeddingTokenCount">
+        <td class="font-bold">
+          {{ t('costs.table.embedding') }}
+        </td>
+        <td>{{ embeddingTokenCount }}</td>
+        <td>{{ embeddingTokensCosts }} {{ t('costs.table.currency') }}</td>
+      </tr>
+      <tr
+        class="font-bold"
+      >
+        <td>
+          {{ t('costs.table.total') }}
+        </td>
+        <td>{{ promptTokenCount + completionTokenCount + embeddingTokenCount }}</td>
+        <td>{{ promptTokensCosts + completionTokensCosts + embeddingTokensCosts }} {{ t('costs.table.currency') }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  promptTokenCount: number
+  promptTokensCosts: number
+  completionTokenCount: number
+  completionTokensCosts: number
+  embeddingTokenCount: number
+  embeddingTokensCosts: number
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Dashboard/Component/BarChart.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="relative">
+    <div class="flex flex-col gap-1">
+      <div class="flex items-baseline gap-4">
+        <p class="text-lg font-medium">
+          {{ title }}
+        </p>
+        <p
+          class="text-surface-500"
+        >
+          {{ agentName }}
+        </p>
+        <DashboardTrend :timeseries="timeseries" />
+      </div>
+    </div>
+    <div class="absolute inset-x-0 top-0">
+      <EventTimeseries
+        :title="title"
+        :series-inputs="seriesInput"
+        :height="250"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { EventTimeseries as EventTimeseriesType } from '@core/sdk/client'
+import type { DashboardWidget } from '@core/types/DashboardWidget'
+import type { TimeseriesInput } from '@core/types/TimeseriesInput'
+
+const props = defineProps<{
+  title: string
+  timeseries: EventTimeseriesType
+  widgetData: DashboardWidget
+}>()
+
+const seriesInput = computed<TimeseriesInput[]>(() => [{
+  name: props.title,
+  color: 'var(--p-surface-600)',
+  timeseries: props.timeseries,
+}])
+
+const { agentName } = useAgentNameFromDashboardWidget(props.widgetData)
+</script>

package/components/Dashboard/Component/LineChart.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="relative">
+    <div class="flex flex-col gap-1">
+      <div class="flex gap-4">
+        <p class="text-lg font-medium">
+          {{ title }}
+        </p>
+        <DashboardTrend :timeseries="timeseries" />
+      </div>
+      <p
+        class="text-surface-500"
+      >
+        {{ agentName }}
+      </p>
+    </div>
+    <ClientOnly>
+      <div class="absolute inset-x-0 top-0">
+        <VueApexChart
+          v-if="chartSeries && chartOptions"
+          type="area"
+          height="250px"
+          :options="chartOptions"
+          :series="chartSeries"
+        />
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import VueApexChart from 'vue3-apexcharts'
+
+import type { EventTimeseries, EventBucket } from '@core/sdk/client'
+import type { DashboardWidget } from '@core/types/DashboardWidget'
+import type { ApexOptions } from 'apexcharts'
+
+const props = defineProps<{
+  title: string
+  timeseries: EventTimeseries
+  widgetData: DashboardWidget
+}>()
+
+const isDark = useDarkMode()
+const { t } = useI18n()
+
+const { agentName } = useAgentNameFromDashboardWidget(props.widgetData)
+
+const chartSeries = computed(() => {
+  if (!props.timeseries?.buckets?.length) {
+    return [{ data: [] }]
+  }
+  return [{
+    name: props.title || 'Events',
+    data: props.timeseries.buckets.map((bucket: EventBucket) => ({
+      x: new Date(bucket.start_time).getTime(),
+      y: bucket.total_events ?? 0,
+    })),
+  }]
+})
+
+const chartOptions = computed<ApexOptions>(() => {
+  const lineColor = isDark.value ? '#9CA3AF' : '#374151' // gray-400 for dark, gray-700 for light
+  const gradientOpacityFrom = isDark.value ? 0.5 : 0.6
+  const gradientOpacityTo = isDark.value ? 0.05 : 0.1
+
+  return {
+    colors: [lineColor],
+    chart: {
+      type: 'area',
+      height: '250px',
+      sparkline: {
+        enabled: true,
+      },
+      animations: {
+        enabled: true,
+        easing: 'smooth',
+        speed: 600,
+        animateGradually: {
+          enabled: true,
+          delay: 100,
+        },
+        dynamicAnimation: {
+          enabled: true,
+          speed: 300,
+        },
+      },
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.5,
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: isDark.value ? 0.7 : 1,
+        opacityFrom: gradientOpacityFrom,
+        opacityTo: gradientOpacityTo,
+        // Removed stops for a linear gradient from opacityFrom to opacityTo
+        // To make it more like the desired image where the top has more body:
+        stops: [0, 85, 100], // Full opacityFrom for first 85% then fade
+      },
+    },
+    tooltip: {
+      enabled: true,
+      theme: isDark.value ? 'dark' : 'light',
+      style: {
+        fontSize: '12px',
+      },
+      x: {
+        show: true,
+        format: 'dd MMM HH:mm',
+      },
+      y: {
+        title: {
+          formatter: (seriesName: string) => `${seriesName}: `,
+        },
+        formatter: (value: number) => {
+          return String(Math.round(value))
+        },
+      },
+      marker: {
+        show: true,
+      },
+    },
+    noData: {
+      text: t('chart.no_data'),
+      align: 'center',
+      verticalAlign: 'middle',
+      offsetX: 0,
+      offsetY: 0,
+      style: {
+        fontSize: '12px',
+      },
+    },
+  }
+})
+</script>

package/components/Dashboard/Component/Number.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="pointer-events-none relative w-full">
+    <p class="pointer-events-none -mt-8 w-full text-center text-[12rem] font-medium opacity-70">
+      {{ sum }}
+    </p>
+    <span class="absolute bottom-8 w-full text-center text-lg font-bold opacity-80">{{ title }}</span>
+    <span
+      class="absolute bottom-2 w-full text-center text-surface-500"
+    >
+      {{ agentName }}
+    </span>
+    <div class="absolute -bottom-6 flex w-full justify-center">
+      <DashboardTrend :timeseries="timeseries" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { EventTimeseries } from '@core/sdk/client'
+import type { DashboardWidget } from '@core/types/DashboardWidget'
+
+const props = defineProps<{
+  title: string
+  timeseries: EventTimeseries
+  widgetData: DashboardWidget
+}>()
+
+const { sum } = useEventTimeseriesStats(props.timeseries)
+
+const { agentName } = useAgentNameFromDashboardWidget(props.widgetData)
+</script>