@swiss-ai-hub/web 0.290.11

package/components/Event/Display/GuardRejectionEvent.vue

@@ -0,0 +1,25 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="icon-park-twotone:shield"
+  >
+    <Message
+      severity="error"
+      icon="pi pi-times-circle"
+      variant="simple"
+      size="small"
+    >
+      {{ event.event.reason }}
+    </Message>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { GuardRejectionEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: GuardRejectionEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/HumanInTheLoopRequestEvent.vue

@@ -0,0 +1,53 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:robot-sad"
+    :is-warning="isOpen"
+  >
+    <div class="py-5">
+      <ChatMessage
+        :message="message"
+        :name="event.agent_class"
+        :email="event.agent_id"
+        :date="new Date(event.event.created_at / 1_000_000)"
+        :icon="agentIcon"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type {
+  ChatMessage,
+  HumanInTheLoopRequestEvent,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: HumanInTheLoopRequestEvent }
+  thread: ThreadDto
+}>()
+
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+const { runForEvent } = useThreadUtils()
+
+const isOpen = computed<boolean>(() => {
+  return runForEvent(props.thread, props.event)?.open_hitl ?? false
+})
+
+const message = computed<ChatMessage>(() => {
+  return {
+    role: 'assistant',
+    agent_class: props.event.agent_class,
+    agent_id: props.event.agent_id,
+    blocks: [
+      {
+        block_type: 'text',
+        text: props.event.event.question,
+      },
+    ],
+  }
+})
+</script>

package/components/Event/Display/HumanInTheLoopResponseEvent.vue

@@ -0,0 +1,40 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:robot-sad"
+    is-external
+  >
+    <div class="py-5">
+      <ChatMessage
+        :message="message"
+        :name="event.agent_class"
+        :date="new Date(event.event.created_at / 1_000_000)"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type {
+  HumanInTheLoopResponseEvent, ThreadDto, ChatMessage,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: HumanInTheLoopResponseEvent }
+  thread: ThreadDto
+}>()
+
+const message = computed<ChatMessage>(() => {
+  return {
+    role: 'user',
+    blocks: [
+      {
+        block_type: 'text',
+        text: props.event.event.response,
+      },
+    ],
+  }
+})
+</script>

package/components/Event/Display/LLMCostEvent.vue

@@ -0,0 +1,25 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:dollar"
+  >
+    <CostsTable
+      :prompt-token-count="event.event.prompt_token_count"
+      :prompt-tokens-costs="event.event.prompt_tokens_costs"
+      :completion-token-count="event.event.completion_token_count"
+      :completion-tokens-costs="event.event.completion_tokens_costs"
+      :embedding-token-count="event.event.embedding_token_count"
+      :embedding-tokens-costs="event.event.embedding_tokens_costs"
+    />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { LlmCostEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: LlmCostEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/LLMEvent.vue

@@ -0,0 +1,92 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="vaadin:chat"
+  >
+    <div class="flex flex-col gap-8">
+      <div
+        v-for="(message, index) in inputMessages"
+        :key="index"
+        class="flex flex-col gap-2"
+      >
+        <ChatMessage
+          :message="message"
+          :name="message.role == 'user' ? 'User' : event.event.chat_model_name"
+          :email="message.role == 'user' ? '' : event.event.provider"
+          :date="new Date(event.event.created_at / 1_000_000)"
+          :icon="agentIcon"
+        />
+      </div>
+      <hr>
+      <div
+        v-for="(message, index) in outputMessages"
+        :key="index"
+        class="flex flex-col gap-2"
+      >
+        <ChatMessage
+          :message="message"
+          :name="message.role == 'user' ? 'User' : event.event.chat_model_name"
+          :email="message.role == 'user' ? '' : event.event.provider"
+          :date="new Date(event.event.created_at / 1_000_000)"
+          :icon="agentIcon"
+        />
+      </div>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type {
+  AudioContent,
+  ChatMessage,
+  ImageContent,
+  LlmEvent,
+  TextContent,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: LlmEvent }
+  thread: ThreadDto
+}>()
+
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+
+const inputMessages = computed<ChatMessage[]>(() => {
+  return props.event.event.input_messages?.map((message) => {
+    return {
+      role: message.role,
+      blocks: message.contents?.map((content: TextContent | ImageContent | AudioContent) => {
+        if (content.type === 'text') {
+          return {
+            block_type: 'text',
+            text: content.text,
+          }
+        }
+        if (content.type === 'image') {
+          return {
+            block_type: 'image',
+            path: content.url,
+          }
+        }
+      }),
+    }
+  }) ?? []
+})
+
+const outputMessages = computed<ChatMessage[]>(() => {
+  return props.event.event.output_messages?.map((message) => {
+    return {
+      role: message.role,
+      blocks: [
+        {
+          block_type: 'text',
+          text: message.content,
+        },
+      ],
+    }
+  }) ?? []
+})
+</script>

package/components/Event/Display/LimitChatHistoryEvent.vue

@@ -0,0 +1,60 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:clock"
+  >
+    <div class="flex flex-col gap-8">
+      <div class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400">
+        <Icon
+          name="mage:clock"
+          class="size-4"
+        />
+        <span>{{ t('event.limitChatHistory.summary', { count: event.event.limited_history.length }) }}</span>
+      </div>
+
+      <div
+        v-for="(message, index) in event.event.limited_history"
+        :key="index"
+        class="flex flex-col gap-2"
+      >
+        <ChatMessage
+          :message="message"
+          :name="getMessageName(message.role)"
+          :email="''"
+          :date="new Date(event.event.created_at / 1_000_000)"
+          :icon="agentIcon"
+        />
+      </div>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type {
+  LimitChatHistoryEvent,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: LimitChatHistoryEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+
+const getMessageName = (role: string) => {
+  switch (role) {
+    case 'user':
+      return t('event.limitChatHistory.user')
+    case 'system':
+      return t('event.limitChatHistory.system')
+    case 'assistant':
+      return t('event.limitChatHistory.assistant')
+    default:
+      return t('event.limitChatHistory.assistant')
+  }
+}
+</script>

package/components/Event/Display/RAGFailureStopEvent.vue

@@ -0,0 +1,28 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="icon-park-twotone:close-one"
+    :is-warning="true"
+  >
+    <Message
+      severity="warn"
+      icon="pi pi-exclamation-triangle"
+      variant="simple"
+      size="small"
+    >
+      {{ t(`event.rag_stop.failure_reason.${event.event.reason}`) }}
+    </Message>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto, RagFailureStopEvent, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: RagFailureStopEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Event/Display/RAGStartEvent.vue

@@ -0,0 +1,77 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file"
+    is-external
+  >
+    <div class="flex flex-col gap-4">
+      <div
+        v-if="event.event.selected_namespaces && event.event.selected_namespaces.length > 0"
+        class="flex flex-wrap items-center gap-2"
+      >
+        <span class="text-sm text-surface-600 dark:text-surface-400">
+          {{ $t('event.rag_start.selected_namespaces') }}
+        </span>
+        <Tag
+          v-for="(pair, index) in event.event.selected_namespaces"
+          :key="index"
+          :value="`${pair.bucket_name} / ${pair.namespace_name}`"
+          severity="info"
+        />
+      </div>
+
+      <div
+        v-if="event.event.additional_filters && event.event.additional_filters.length > 0"
+        class="flex flex-col gap-2"
+      >
+        <span class="text-sm text-surface-600 dark:text-surface-400">
+          {{ $t('event.rag_start.additional_filters') }}
+        </span>
+        <div
+          v-for="(bucketFilter, bidx) in event.event.additional_filters"
+          :key="bidx"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <span class="text-sm font-medium">{{ bucketFilter.bucket_name }}</span>
+          <Tag
+            v-for="(filter, fidx) in bucketFilter.filters"
+            :key="fidx"
+            :value="`${filter.key} = ${filter.value}`"
+            severity="secondary"
+          />
+        </div>
+      </div>
+
+      <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>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+// HeyAPI generates PascalCase types (RagStartEvent), but the runtime _event_name from Python's
+// cls.__name__ is "RAGStartEvent". useEventComponent.ts maps against the runtime string;
+// this import is the SDK type only. Do not "fix" one side without the other.
+import type { ThreadDto, RagStartEvent, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: RagStartEvent }
+  thread: ThreadDto
+}>()
+
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+</script>

package/components/Event/Display/RAGSuccessStopEvent.vue

@@ -0,0 +1,16 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="icon-park-twotone:success"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ThreadDto, RagSuccessStopEvent, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: RagSuccessStopEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/RawDataContent.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Divider class="my-4" />
+    <div class="max-h-96 overflow-auto break-words rounded-lg border bg-surface-0 p-4 dark:border-surface-700 dark:bg-surface-900">
+      <Tree
+        :value="treeData"
+        selection-mode="single"
+        :meta-key-selection="false"
+      >
+        <template #default="{ node }">
+          <div class="flex items-center gap-2">
+            <Icon
+              v-if="node.type === 'string'"
+              name="mage:message"
+              class="size-3 text-surface-600 dark:text-surface-400"
+            />
+            <Icon
+              v-else-if="node.type === 'number'"
+              name="mage:hash"
+              class="size-3 text-surface-600 dark:text-surface-400"
+            />
+            <Icon
+              v-else-if="node.type === 'boolean'"
+              name="mage:check-circle"
+              class="size-3 text-surface-600 dark:text-surface-400"
+            />
+            <Icon
+              v-else-if="node.type === 'null'"
+              name="mage:cancel"
+              class="size-3 text-surface-500 dark:text-surface-500"
+            />
+            <Icon
+              v-else-if="node.type === 'array'"
+              name="mage:arrowlist"
+              class="size-3 text-surface-600 dark:text-surface-400"
+            />
+            <Icon
+              v-else-if="node.type === 'object'"
+              name="mage:box"
+              class="size-3 text-surface-600 dark:text-surface-400"
+            />
+            <span class="font-mono text-sm">{{ node.label }}</span>
+          </div>
+        </template>
+      </Tree>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent } from '@core/sdk/client'
+import type { TreeNode } from 'primevue/treenode'
+
+interface Props {
+  event: ContextualizedAgentEvent
+}
+
+const props = defineProps<Props>()
+
+const { convertJsonToTree } = useJsonTree()
+
+const treeData = computed<TreeNode[]>(() => {
+  const eventData = props.event.event || props.event
+  return convertJsonToTree(eventData, 'event', {
+    maxDepth: 8,
+    expandLevel: 2,
+  })
+})
+</script>

package/components/Event/Display/RerankerEvent.vue

@@ -0,0 +1,39 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:arrowlist"
+  >
+    <div class="flex flex-col gap-4">
+      <IconField class="w-full">
+        <InputIcon class="pi pi-search" />
+        <InputText
+          :model-value="event.event.query"
+          class="w-full"
+          readonly
+        />
+      </IconField>
+      <div class="flex items-center gap-2 pt-5 text-sm font-medium text-surface-600 dark:text-surface-400">
+        <Icon
+          name="mage:filter"
+          class="size-4"
+        />
+        <span>{{ t('event.reranker.topDocuments', { count: event.event.top_k }) }}</span>
+      </div>
+      <ChatSourceNodes
+        :nodes="event.event.output_nodes ?? []"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { RerankerEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: RerankerEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Event/Display/RetrieverEvent.vue

@@ -0,0 +1,22 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file"
+  >
+    <div class="flex flex-col gap-4">
+      <ChatSourceNodes
+        :nodes="event.event.nodes ?? []"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { RetrieverEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: RetrieverEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/RouterEvent.vue

@@ -0,0 +1,54 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:arrowlist"
+  >
+    <div class="flex flex-col gap-3">
+      <p class="border-l-4 border-surface-200 pl-3 italic dark:border-surface-600">
+        {{ event.event.reason }}
+      </p>
+      <Panel
+        v-for="route in event.event.routes"
+        :key="route.event_id"
+        class="flex flex-col gap-2"
+      >
+        <template #header>
+          <div class="flex w-full flex-row items-center justify-between gap-2 px-5 pt-3">
+            <span class="font-bold">
+              {{ route.name }}
+            </span>
+            <Tag
+              v-if="isSelectedRoute(route)"
+              icon="pi pi-check"
+              severity="success"
+              value="Selected"
+            />
+            <Tag
+              v-else
+              icon="pi pi-times"
+              severity="danger"
+              value="Rejected"
+            />
+          </div>
+        </template>
+        <span>
+          {{ route.description }}
+        </span>
+      </Panel>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { RouteOptions, RouterEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: RouterEvent }
+  thread: ThreadDto
+}>()
+
+const isSelectedRoute = (route: RouteOptions) => {
+  return route.event_id == props.event.event.selected_option.event_id
+}
+</script>

package/components/Event/Display/StandaloneQuestionCondenserEvent.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:question-mark-circle"
+  >
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-medium text-surface-600 dark:text-surface-400">
+        <Icon
+          name="mage:archive"
+          class="size-4"
+        />
+        {{ t('event.standaloneQuestionCondenser.condensedQuestion') }}
+      </span>
+      <ChatMessage
+        :message="event.event.condensed_chat_message"
+        :name="t('event.standaloneQuestionCondenser.user')"
+        :icon="agentIcon"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type {
+  StandaloneQuestionCondenserEvent,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: StandaloneQuestionCondenserEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+</script>

package/components/Event/Display/StopEvent.vue

@@ -0,0 +1,16 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="icon-park-twotone:success"
+  />
+</template>
+
+<script setup lang="ts">
+import type { StopEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: StopEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/ThoughtEvent.vue

@@ -0,0 +1,20 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mingcute:thought-fill"
+  >
+    <p class="border-l-4 border-surface-200 pl-3 italic dark:border-surface-600">
+      {{ event.event.reasoning_content }}
+    </p>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ThoughtEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ThoughtEvent }
+  thread: ThreadDto
+}>()
+</script>