@swiss-ai-hub/web 0.290.11

package/components/Dashboard/Grid.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="flex w-full justify-center">
+    <div class="flex w-full max-w-screen-2xl flex-col gap-2 p-4">
+      <div class="flex justify-end">
+        <div class="pr-4">
+          <Button
+            type="button"
+            :label="t('dashboard.add_widget')"
+            icon="pi pi-plus"
+            @click="($event) => newWidget.toggle($event)"
+          />
+          <Popover ref="newWidget">
+            <div class="flex flex-col gap-2">
+              <p class="font-bold">
+                {{ t("dashboard.create_widget") }}
+              </p>
+              <SelectButton
+                v-model="component"
+                size="small"
+                option-label="label"
+                :options="componentOptions"
+                :allow-empty="false"
+              />
+              <SelectButton
+                v-model="timeRange"
+                size="small"
+                :options="timeRanges"
+                :allow-empty="false"
+              />
+              <Select
+                v-model="event"
+                :options="eventOptions"
+                option-label="label"
+                :placeholder="t('dashboard.select_data_type')"
+              />
+              <Select
+                v-model="agent"
+                :options="agentInstances"
+                option-label="agent_config.name"
+                :placeholder="t('dashboard.select_agent')"
+                :loading="agentInstancesAreLoading"
+                show-clear
+              />
+              <Button
+                :label="t('dashboard.create')"
+                :disabled="!(timeRange && event)"
+                @click="addWidget"
+              />
+            </div>
+          </Popover>
+        </div>
+      </div>
+      <div
+        ref="gridstack"
+        class="min-h-[400px]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GridStack } from 'gridstack'
+import { v4 as uuid } from 'uuid'
+import { h, render } from 'vue'
+
+import 'gridstack/dist/gridstack.min.css'
+import GridItemVue from './Item.vue'
+
+import type { FullAgentInstanceDto, TimeRange } from '@core/sdk/client'
+import type { DashboardWidget } from '@core/types/DashboardWidget'
+import type { GridStackElement } from 'gridstack'
+
+const { agentInstances, agentInstancesAreLoading } = useAgentInstances()
+const { t } = useI18n()
+const { myUser, myUserIsLoading } = useMyUser()
+const { saveDashboard } = useSaveDashboard()
+const { tenantId } = useTenant()
+
+watch(myUser, () => {
+  if (myUser.value?.dashboard?.children && grid) {
+    grid.load(myUser.value?.dashboard?.children ?? [])
+  }
+})
+
+const gridStackElement = templateRef('gridstack')
+let grid: GridStack | null = null
+const itemRenderContexts = new Map<string, HTMLElement>()
+
+const nuxtApp = useNuxtApp()
+
+onMounted(() => {
+  grid = GridStack.init({
+    cellHeight: '350px',
+    minRow: 1,
+    margin: '24px',
+    column: 4,
+  }, gridStackElement.value)
+
+  GridStack.addRemoveCB = (_: HTMLElement, w: DashboardWidget, add: boolean): GridStackElement | undefined => {
+    const widgetId = w.id
+
+    if (add) {
+      const tempRenderHost = document.createElement('div')
+
+      const vueComponentVNode = h(
+        GridItemVue,
+        {
+          component: w.component,
+          data: w,
+          onRemove: (domElementToRemove: HTMLElement) => {
+            if (grid && domElementToRemove) {
+              grid.removeWidget(domElementToRemove)
+            }
+          },
+        },
+      )
+
+      if (nuxtApp && nuxtApp.vueApp) {
+        vueComponentVNode.appContext = nuxtApp.vueApp._context
+      }
+
+      render(vueComponentVNode, tempRenderHost)
+      itemRenderContexts.set(widgetId, tempRenderHost)
+      return vueComponentVNode.el as GridStackElement
+    }
+    else {
+      const contextHostToUnmount = itemRenderContexts.get(widgetId)
+      if (contextHostToUnmount) {
+        render(null, contextHostToUnmount)
+        itemRenderContexts.delete(widgetId)
+      }
+    }
+  }
+
+  if (!myUserIsLoading.value) {
+    grid.load(myUser.value?.dashboard?.children ?? [])
+  }
+
+  grid.on('change', () => {
+    saveLayout()
+  })
+
+  grid.on('added', () => {
+    saveLayout()
+  })
+
+  grid.on('removed', () => {
+    saveLayout()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (grid) {
+    itemRenderContexts.forEach(host => render(null, host))
+    itemRenderContexts.clear()
+    grid.destroy(false)
+    grid = null
+    GridStack.addRemoveCB = undefined
+  }
+})
+
+const saveLayout = () => {
+  if (grid) {
+    const serializedData = grid.save(true, true)
+    saveDashboard({ grid: serializedData, tenantId: tenantId.value! })
+  }
+}
+
+const newWidget = templateRef('newWidget')
+
+type componentSelection = { label: string, component: string, w: number, h: number }
+const componentOptions = ref<componentSelection[]>([
+  { label: 'Number', component: 'DashboardComponentNumber', w: 1, h: 1 },
+  { label: 'Line Chart', component: 'DashboardComponentLineChart', w: 2, h: 1 },
+  { label: 'Bar Chart', component: 'DashboardComponentBarChart', w: 2, h: 1 },
+])
+const component = ref<componentSelection>(componentOptions.value[0])
+
+const timeRange = ref<TimeRange>('24h')
+const timeRanges = ref<string[]>(['1h', '24h', '30d', '365d'])
+
+const agent = ref<FullAgentInstanceDto | null>(null)
+
+type eventType = { label: string, event: string }
+const eventOptions = computed<eventType[]>(() => {
+  return [
+    'StartEvent',
+    'UserMessageEvent',
+    'ExceptionEvent',
+    'HumanInTheLoopRequestEvent',
+    'BotInTheLoopRequestEvent',
+    'AgentInTheLoopRequestEvent',
+  ].map((event: string) => ({
+    event,
+    label: t(`dashboard.events.${event}.label`),
+  }))
+})
+const event = ref<eventType | null>(null)
+
+const addWidget = () => {
+  if (!grid) return
+  const newWidgetNodeToAdd: DashboardWidget = {
+    id: uuid(),
+    component: component.value.component,
+    w: component.value.w,
+    h: component.value.h,
+    noResize: true,
+    timeRange: timeRange.value,
+    agent: agent.value ? { agentId: agent.value.agent_id, agentClass: agent.value.agent_class } : undefined,
+    event: event.value!.event,
+  }
+  grid.addWidget(newWidgetNodeToAdd)
+}
+</script>

package/components/Dashboard/Item.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    ref="gridItemRoot"
+    class="grid-stack-item"
+  >
+    <div class="size-full p-4">
+      <div class="flex size-full flex-col justify-start gap-2 rounded-xl border border-surface-200 bg-white p-4 shadow-lg dark:border-surface-800 dark:bg-surface-900">
+        <div class="flex w-full justify-between">
+          <Tag
+            severity="secondary"
+            :value="timeRangeName"
+          />
+          <button @click="handleRemove">
+            <Icon
+              name="oui:cross"
+              size="xl"
+            />
+          </button>
+        </div>
+        <ProgressSpinner
+          v-if="timeseriesIsLoading"
+          class="mt-24 size-12"
+        />
+        <div v-else>
+          <component
+            :is="vueComponent"
+            :title="title"
+            :timeseries="timeseries"
+            :widget-data="data"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DashboardWidget } from '@core/types/DashboardWidget'
+
+const props = defineProps<{
+  component: string
+  data: DashboardWidget
+}>()
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  remove: [HTMLElement]
+}>()
+
+const title = computed(() => t(`dashboard.events.${props.data.event}.label`))
+
+const timeRange = computed(() => props.data.timeRange)
+const timeRangeName = computed(() => t(`timerange.${timeRange.value}`))
+
+const { timeseries, timeseriesIsLoading } = useEventTimeseries({
+  eventName: props.data.event,
+  timeRange: timeRange,
+  agentId: props.data?.agent?.agentId,
+  agentClass: props.data?.agent?.agentClass,
+})
+
+const gridItemRoot = ref<HTMLElement | null>(null)
+const { resolveComponent } = useDashboardComponent()
+
+const vueComponent = computed(() => {
+  return resolveComponent(props.component)
+})
+
+const handleRemove = () => {
+  if (gridItemRoot.value) {
+    emit('remove', gridItemRoot.value)
+  }
+}
+</script>

package/components/Dashboard/Trend.vue

@@ -0,0 +1,34 @@
+<template>
+  <Tag
+    v-if="isTrendingUp"
+    :severity="reverseLogic ? 'danger' : 'success'"
+    :value="t('chart.trending_up')"
+    size="small"
+    icon="pi pi-arrow-up-right"
+    rounded
+  />
+  <Tag
+    v-else
+    :severity="reverseLogic ? 'success' : 'danger'"
+    :value="t('chart.trending_down')"
+    icon="pi pi-arrow-down-right"
+    rounded
+  />
+</template>
+
+<script setup lang="ts">
+import type { EventTimeseries } from '@core/sdk/client'
+
+const props = defineProps<{
+  timeseries: EventTimeseries
+}>()
+
+const { t } = useI18n()
+const { isTrendingUp } = useEventTimeseriesStats(props.timeseries)
+
+const EXCEPTION_EVENT = 'ExceptionEvent'
+
+const reverseLogic = computed(() => {
+  return props.timeseries.event_name === EXCEPTION_EVENT
+})
+</script>

package/components/Display/List/DisplayList.vue

@@ -0,0 +1,93 @@
+<template>
+  <DataTable
+    :value="displays"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    :selection="selectedDisplay"
+    size="small"
+    @update:selection="emit('selected', $event)"
+  >
+    <Column
+      field="Started"
+      :header="t('thread.display.list.started')"
+    >
+      <template #body="{ data }">
+        <p>{{ formatted(data.started_at) }}</p>
+      </template>
+    </Column>
+    <Column
+      field="duration"
+      :header="t('thread.display.list.duration')"
+    >
+      <template #body="{ data }">
+        <Badge :value="data.duration" />
+      </template>
+    </Column>
+    <Column
+      field="n_events"
+      :header="t('thread.display.list.events')"
+    >
+      <template #body="{ data }">
+        <Badge :value="data.n_events" />
+      </template>
+    </Column>
+    <Column
+      field="has_errors"
+      :header="t('thread.display.list.status')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.has_errors"
+          severity="danger"
+          :value="t('event.list.error')"
+        />
+        <Tag
+          v-else
+          severity="success"
+          :value="t('event.list.successful')"
+        />
+      </template>
+    </Column>
+    <Column
+      field="has_pending"
+      :header="t('thread.display.list.pending')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.has_pending"
+          severity="warn"
+          :value="pendingType(data)"
+        />
+        <Tag
+          v-else
+          severity="success"
+          :value="t('event.list.no')"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type { DisplayStatistics } from '@core/sdk/client'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const props = defineProps<{
+  displays: DisplayStatistics[]
+}>()
+
+const emit = defineEmits<{
+  selected: [display: DisplayStatistics]
+}>()
+
+const formatted = (datestr: string) => useDateFormat(new Date(datestr), t('thread.display.list.dateFormat'))
+const { pendingType } = useThreadUtils()
+
+const selectedDisplay = computed(() => {
+  return props.displays.filter((display: DisplayStatistics) => {
+    return display.display_id === route.params.display_id
+  })
+})
+</script>

package/components/Evaluation/Dataset/Card.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col gap-3 rounded-xl border border-surface-200 p-4 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+    :class="{ 'bg-surface-100 dark:bg-surface-800': isActive }"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <div class="flex items-center justify-start gap-2">
+        <div
+          class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+        >
+          <Icon
+            name="mage:book"
+            size="1.5em"
+          />
+        </div>
+        <h3 class="font-semibold opacity-80">
+          {{ dataset.dataset_name }}
+        </h3>
+      </div>
+      <Button
+        v-if="langfuseDatasetUrl"
+        :label="t('evaluation.langfuse_link')"
+        icon="pi pi-external-link"
+        icon-pos="right"
+        size="small"
+        outlined
+        as="a"
+        :href="langfuseDatasetUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        @click.stop
+      />
+    </div>
+    <div>
+      <span class="text-xs">
+        {{ dataset.description }}
+      </span>
+    </div>
+    <div>
+      <div class="text-sm">
+        {{ t('evaluation.dataset.created_at') }}
+        <span class="font-light">
+          {{ useDateFormat(dataset.created_at, 'DD.MM.YYYY') }}
+        </span>
+      </div>
+      <div class="text-sm">
+        {{ t('evaluation.dataset.updated_at') }}
+        <span class="font-light">
+          {{ useDateFormat(dataset.updated_at, 'DD.MM.YYYY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MinimalDataset } from '@core/sdk/client'
+
+const props = defineProps<{
+  dataset: MinimalDataset
+  langfuseDatasetUrl?: string
+}>()
+
+const route = useRoute()
+const { t } = useI18n()
+
+const isActive = computed(() => {
+  return route.params.dataset_id === props.dataset.id
+})
+</script>

package/components/Evaluation/Dataset/Create.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <span class="mb-8 block text-surface-500 dark:text-surface-400">
+      {{ t('evaluation.dataset.create_description') }}
+    </span>
+    <div class="mb-4 flex flex-col gap-4">
+      <div class="flex flex-col">
+        <label
+          for="name"
+          class="font-semibold"
+        >
+          {{ t('evaluation.dataset.name') }}
+        </label>
+        <InputText
+          id="name"
+          v-model="dataset.dataset_name"
+          class="flex-auto"
+          autocomplete="off"
+        />
+      </div>
+      <div class="flex flex-col">
+        <label
+          for="description"
+          class="w-24 font-semibold"
+        >
+          {{ t('evaluation.dataset.description') }}
+        </label>
+        <Textarea
+          id="description"
+          v-model="dataset.description"
+          class="flex-auto"
+          autocomplete="off"
+        />
+      </div>
+      <EvaluationDatasetEdit v-model="dataset" />
+      <div class="flex justify-end gap-2">
+        <Button
+          type="button"
+          :label="t('evaluation.dataset.cancel')"
+          severity="secondary"
+          @click="close"
+        />
+        <Button
+          type="button"
+          :label="t('evaluation.dataset.save')"
+          :disabled="!dataset.dataset_name || !dataset.description || dataset.items.length === 0"
+          @click="save"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { DatasetCreate } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const dataset = ref<DatasetCreate>({
+  dataset_name: '',
+  description: '',
+  items: [],
+})
+
+const { createDataset } = useCreateDataset()
+const { tenantId } = useTenant()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const close = () => {
+  emit('close')
+}
+const save = async () => {
+  await createDataset({ dataset: dataset.value, tenantId: tenantId.value! })
+  emit('close')
+}
+</script>

package/components/Evaluation/Dataset/Edit.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <p
+      v-if="modelValue.items.length === 0"
+      class="text-sm text-surface-500 dark:text-surface-400"
+    >
+      {{ t('evaluation.dataset.add_at_least_one') }}
+    </p>
+    <DataTable
+      v-else
+      :value="modelValue.items"
+      size="small"
+    >
+      <Column
+        field="question"
+        :header="t('evaluation.dataset.question_header')"
+      />
+      <Column
+        field="answer"
+        :header="t('evaluation.dataset.answer_header')"
+      />
+      <Column
+        :header="t('evaluation.dataset.status')"
+        class="w-24 !text-end"
+      >
+        <template #body="{ data: item }">
+          <Tag
+            v-if="isTemporaryItem(item)"
+            :value="t('evaluation.dataset.new')"
+            severity="success"
+          />
+        </template>
+      </Column>
+      <Column class="w-12">
+        <template #body="{ data: item }">
+          <Button
+            v-if="isTemporaryItem(item)"
+            icon="pi pi-times"
+            severity="secondary"
+            variant="text"
+            rounded
+            size="small"
+            @click="removeItem(item)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+    <div class="flex gap-2">
+      <InputGroup>
+        <InputGroupAddon>
+          <i class="pi pi-question" />
+        </InputGroupAddon>
+        <InputText
+          v-model="question"
+          :placeholder="t('evaluation.dataset.question_placeholder')"
+          @click.enter="add"
+        />
+      </InputGroup>
+      <InputGroup>
+        <InputGroupAddon>
+          <i class="pi pi-check" />
+        </InputGroupAddon>
+        <InputText
+          v-model="answer"
+          :placeholder="t('evaluation.dataset.answer_placeholder')"
+          @click.enter="add"
+        />
+      </InputGroup>
+      <div>
+        <Button
+          type="button"
+          :label="t('evaluation.dataset.add_button')"
+          icon="pi pi-plus"
+          :disabled="!question || !answer"
+          @click="add"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { Dataset, DatasetCreate, DatasetItem } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: Dataset | DatasetCreate
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [Dataset]
+}>()
+
+const dataset = ref<Dataset | DatasetCreate>(props.modelValue)
+watch(() => props.modelValue, (newValue: Dataset | DatasetCreate) => {
+  dataset.value = newValue
+}, { deep: true })
+
+const question = ref('')
+const answer = ref('')
+const add = () => {
+  if (!question.value || !answer.value) {
+    return
+  }
+  if (!dataset.value.items) {
+    dataset.value.items = []
+  }
+  dataset.value.items.push({
+    question: question.value,
+    answer: answer.value,
+    id: `tmp-${new Date().getTime()}`,
+  })
+  question.value = ''
+  answer.value = ''
+  emit('update:modelValue', dataset.value)
+}
+
+const removeItem = (itemToRemove: DatasetItem) => {
+  if (!dataset.value.items) return
+  dataset.value.items = dataset.value.items.filter(
+    (datasetItem: DatasetItem) => datasetItem.id !== itemToRemove.id,
+  )
+  emit('update:modelValue', dataset.value)
+}
+
+const isTemporaryItem = (item: DatasetItem) => {
+  return !item.id || item.id.startsWith('tmp')
+}
+</script>