@swiss-ai-hub/web 0.321.0 → 0.323.0

package/components/Event/Display/AddMemoryToChatHistoryEvent.vue

@@ -32,13 +32,13 @@
 
 <script setup lang="ts">
 import type {
-  AddMemoryToChatHistoryEventReadable,
+  AddMemoryToChatHistoryEvent,
   ThreadDto,
-  AgentEventReadable,
+  ContextualizedAgentEvent,
 } from '@core/sdk/client'
 
 const props = defineProps<{
-  event: AgentEventReadable & { event: AddMemoryToChatHistoryEventReadable }
+  event: ContextualizedAgentEvent & { event: AddMemoryToChatHistoryEvent }
   thread: ThreadDto
 }>()
 

package/components/Event/Display/AttachedFileEvent.vue

@@ -0,0 +1,42 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file-2"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <span class="font-semibold">{{ event.event.filename }}</span>
+        <Tag
+          :value="t(`event.capability.fileStatus.${event.event.status}`)"
+          :severity="severity"
+        />
+      </div>
+      <EventDisplayPartFacts :facts="facts" />
+      <pre
+        v-if="event.event.content"
+        class="max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-50 p-3 text-xs dark:bg-surface-850"
+      >{{ event.event.content }}</pre>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { AttachedFileEvent, ContextualizedAgentEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: AttachedFileEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const severity = computed(() => ({ read: 'success', truncated: 'warn', failed: 'danger' })[props.event.event.status])
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.citationId'), value: props.event.event.citation_id },
+  { label: t('event.capability.pages'), value: props.event.event.number_of_pages },
+  { label: t('event.capability.error'), value: props.event.event.error },
+])
+</script>

package/components/Event/Display/AttachedFilesReadEvent.vue

@@ -0,0 +1,22 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file-2"
+  >
+    <EventDisplayPartMessageList
+      :messages="event.event.block ?? []"
+      :event="event"
+      :thread="thread"
+    />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { AttachedFilesReadEvent, ContextualizedAgentEvent, ThreadDto } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: AttachedFilesReadEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/BaseRetrieveMemoryEvent.vue

@@ -80,10 +80,10 @@
 </template>
 
 <script setup lang="ts">
-import type { BaseRetrieveMemoryEventReadable, ThreadDto, AgentEventReadable } from '@core/sdk/client'
+import type { BaseRetrieveMemoryEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
 
 defineProps<{
-  event: AgentEventReadable & { event: BaseRetrieveMemoryEventReadable }
+  event: ContextualizedAgentEvent & { event: BaseRetrieveMemoryEvent }
   thread: ThreadDto
 }>()
 

package/components/Event/Display/BaseStoreMemoryEvent.vue

@@ -149,10 +149,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { BaseStoreMemoryEventReadable, ThreadDto, AgentEventReadable } from '@core/sdk/client'
+import type { BaseStoreMemoryEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
 
 const props = defineProps<{
-  event: AgentEventReadable & { event: BaseStoreMemoryEventReadable }
+  event: ContextualizedAgentEvent & { event: BaseStoreMemoryEvent }
   thread: ThreadDto
 }>()
 

package/components/Event/Display/CompleteConversationEvent.vue

@@ -0,0 +1,35 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:stop-circle-fill"
+  >
+    <div class="flex flex-col gap-4">
+      <EventDisplayPartFacts :facts="facts" />
+      <p
+        v-if="answer"
+        class="whitespace-pre-wrap rounded-xl bg-surface-50 p-3 text-sm dark:bg-surface-850"
+      >
+        {{ answer }}
+      </p>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { CompleteConversationEvent, ContextualizedAgentEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: CompleteConversationEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const answer = computed(() => props.event.event.answer.output_messages?.at(-1)?.content)
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.stop'), value: props.event.event.stop?._event_name ?? 'LLMStopEvent' },
+])
+</script>

package/components/Event/Display/ComposeContextEvent.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:database-plus"
+  >
+    <div class="flex flex-col gap-6">
+      <EventDisplayPartFacts :facts="facts" />
+      <EventDisplayPartMessageList
+        v-for="(block, index) in blocks"
+        :key="index"
+        :messages="block"
+        :event="event"
+        :thread="thread"
+        :title="t('event.capability.block', { number: index + 1 })"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ComposeContextEvent, ContextualizedAgentEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ComposeContextEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const blocks = computed(() => (props.event.event.blocks ?? []).filter(block => block.length > 0))
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.historyMessages'), value: props.event.event.history.length },
+  { label: t('event.capability.blocks'), value: blocks.value.length },
+])
+</script>

package/components/Event/Display/ContextComposedEvent.vue

@@ -0,0 +1,60 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="lucide:layers"
+  >
+    <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="lucide:layers"
+          class="size-4"
+        />
+        <span>{{ t('event.contextComposed.summary', { count: event.event.history.length }) }}</span>
+      </div>
+
+      <div
+        v-for="(message, index) in event.event.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 {
+  ContextComposedEvent,
+  ThreadDto,
+  ContextualizedAgentEvent,
+} from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ContextComposedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+
+const getMessageName = (role: string) => {
+  switch (role) {
+    case 'user':
+      return t('event.contextComposed.user')
+    case 'system':
+      return t('event.contextComposed.system')
+    case 'assistant':
+      return t('event.contextComposed.assistant')
+    default:
+      return t('event.contextComposed.assistant')
+  }
+}
+</script>

package/components/Event/Display/ContextualizeConversationEvent.vue

@@ -0,0 +1,26 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:edit"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizeConversationEvent, ContextualizedAgentEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ContextualizeConversationEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.userQuery'), value: props.event.event.user_query },
+  { label: t('event.capability.historyMessages'), value: props.event.event.history.length },
+])
+</script>

package/components/Event/Display/ConversationContextualizedEvent.vue

@@ -0,0 +1,34 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:edit"
+  >
+    <div class="flex flex-col gap-4">
+      <EventDisplayPartFacts :facts="facts" />
+      <Tag
+        v-if="event.event.condensed"
+        :value="t('event.capability.condensed')"
+        severity="info"
+        class="self-start"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ConversationContextualizedEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ConversationContextualizedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.query'), value: props.event.event.query },
+  { label: t('event.capability.historyMessages'), value: props.event.event.history.length },
+])
+</script>

package/components/Event/Display/HumanInTheLoopResponseEvent.vue

@@ -26,13 +26,23 @@ const props = defineProps<{
   thread: ThreadDto
 }>()
 
+const { t } = useI18n()
+
+const responseText = computed<string>(() => {
+  const response = props.event.event.response
+  if (typeof response === 'boolean') {
+    return t(`event.humanInTheLoopResponse.${response ? 'confirmed' : 'declined'}`)
+  }
+  return response
+})
+
 const message = computed<ChatMessage>(() => {
   return {
     role: 'user',
     blocks: [
       {
         block_type: 'text',
-        text: props.event.event.response,
+        text: responseText.value,
       },
     ],
   }

package/components/Event/Display/KnowledgeSearchedEvent.vue

@@ -0,0 +1,33 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file"
+  >
+    <div class="flex flex-col gap-4">
+      <EventDisplayPartFacts :facts="facts" />
+      <ChatSourceNodes :nodes="event.event.grounding_nodes ?? []" />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, KnowledgeSearchedEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: KnowledgeSearchedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.sections'), value: (props.event.event.grounding_nodes ?? []).length },
+  {
+    label: t('event.capability.notSearched'),
+    value: (props.event.event.refused ?? []).map(reference => `${reference.database} / ${reference.namespace}`),
+  },
+  { label: t('event.capability.toolCall'), value: props.event.event.tool_call_id },
+])
+</script>

package/components/Event/Display/MemoryRecalledEvent.vue

@@ -0,0 +1,33 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:brain"
+  >
+    <div class="flex flex-col gap-6">
+      <EventDisplayPartMessageList
+        :messages="event.event.user_block ?? []"
+        :event="event"
+        :thread="thread"
+        :title="t('event.capability.userMemories')"
+      />
+      <EventDisplayPartMessageList
+        :messages="event.event.organization_block ?? []"
+        :event="event"
+        :thread="thread"
+        :title="t('event.capability.organizationMemories')"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, MemoryRecalledEvent, ThreadDto } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: MemoryRecalledEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Event/Display/MemoryStorageRequestedEvent.vue

@@ -0,0 +1,29 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:content-save-cog"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, MemoryStorageRequestedEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: MemoryStorageRequestedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  {
+    label: t('event.capability.targetAgent'),
+    value: `${props.event.event.target_agent_class} / ${props.event.event.target_agent_id}`,
+  },
+  { label: t('event.capability.historyMessages'), value: props.event.event.start_event.messages.length },
+])
+</script>

package/components/Event/Display/NotAMetaQuestionEvent.vue

@@ -0,0 +1,20 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:help-circle-outline"
+  >
+    <span class="text-sm text-surface-600 dark:text-surface-400">
+      {{ event.event.reasoning }}
+    </span>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, NotAMetaQuestionEvent, ThreadDto } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: NotAMetaQuestionEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/Part/Facts.vue

@@ -0,0 +1,39 @@
+<template>
+  <dl class="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2 text-sm">
+    <template
+      v-for="fact in shownFacts"
+      :key="fact.label"
+    >
+      <dt class="text-surface-500 dark:text-surface-400">
+        {{ fact.label }}
+      </dt>
+      <dd class="break-words text-surface-800 dark:text-surface-200">
+        <div
+          v-if="Array.isArray(fact.value)"
+          class="flex flex-wrap gap-1"
+        >
+          <Tag
+            v-for="item in fact.value"
+            :key="item"
+            :value="item"
+            severity="secondary"
+          />
+          <span v-if="fact.value.length === 0">–</span>
+        </div>
+        <span v-else>{{ fact.value }}</span>
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<script setup lang="ts">
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  facts: EventFact[]
+}>()
+
+const shownFacts = computed<EventFact[]>(() =>
+  props.facts.filter(fact => fact.value !== null && fact.value !== undefined && fact.value !== ''),
+)
+</script>

package/components/Event/Display/Part/MessageList.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <p
+      v-if="title"
+      class="text-sm font-semibold text-surface-600 dark:text-surface-400"
+    >
+      {{ title }}
+    </p>
+    <p
+      v-if="messages.length === 0"
+      class="text-sm text-surface-500 dark:text-surface-400"
+    >
+      {{ t('event.parts.noMessages') }}
+    </p>
+    <ChatMessage
+      v-for="(message, index) in messages"
+      :key="index"
+      :message="message"
+      :name="roleName(message.role)"
+      :email="''"
+      :date="new Date(event.event.created_at / 1_000_000)"
+      :icon="agentIcon"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ChatMessage, ThreadDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  messages: ChatMessage[]
+  event: ContextualizedAgentEvent
+  thread: ThreadDto
+  title?: string
+}>()
+
+const { t } = useI18n()
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+
+const roleName = (role: string | undefined) => {
+  switch (role) {
+    case 'user':
+      return t('event.contextComposed.user')
+    case 'system':
+      return t('event.contextComposed.system')
+    default:
+      return t('event.contextComposed.assistant')
+  }
+}
+</script>

package/components/Event/Display/Part/ToolCalls.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <p class="text-sm font-semibold text-surface-600 dark:text-surface-400">
+      {{ t('event.toolLoop.decidedCalls', { count: calls.length }) }}
+    </p>
+    <div
+      v-for="call in calls"
+      :key="call.id"
+      class="flex flex-col gap-1 rounded-xl bg-surface-50 p-3 dark:bg-surface-850"
+    >
+      <div class="flex items-center gap-2">
+        <Icon
+          name="mynaui:tool"
+          class="size-4"
+        />
+        <span class="font-semibold">{{ call.name }}</span>
+        <span class="text-xs text-surface-500 dark:text-surface-400">{{ call.id }}</span>
+      </div>
+      <pre class="max-h-48 overflow-auto whitespace-pre-wrap break-words text-xs">{{ call.arguments }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Message } from '@core/sdk/client'
+
+const props = defineProps<{
+  messages: Message[]
+  toolCallIds: string[]
+}>()
+
+const { t } = useI18n()
+
+type DecidedCall = { id: string, name: string, arguments: string }
+
+const prettyArguments = (raw: unknown): string => {
+  if (typeof raw !== 'string') {
+    return JSON.stringify(raw ?? {}, null, 2)
+  }
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  }
+  catch {
+    return raw
+  }
+}
+
+const calls = computed<DecidedCall[]>(() => {
+  const wanted = new Set(props.toolCallIds)
+  return props.messages
+    .flatMap(message => message.tool_calls ?? [])
+    .map((call) => {
+      const fn = (call.function ?? {}) as { name?: string, arguments?: unknown }
+      return { id: String(call.id ?? ''), name: fn.name ?? '', arguments: prettyArguments(fn.arguments) }
+    })
+    .filter(call => wanted.has(call.id))
+})
+</script>

package/components/Event/Display/Part/ToolLoopState.vue

@@ -0,0 +1,36 @@
+<template>
+  <EventDisplayPartFacts :facts="facts" />
+</template>
+
+<script setup lang="ts">
+import type { ToolLoopState } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  state: ToolLoopState
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.toolLoop.loop'), value: props.state.loop },
+  { label: t('event.toolLoop.mode'), value: t(`event.toolLoop.modes.${props.state.mode}`) },
+  {
+    label: t('event.toolLoop.iteration'),
+    value: props.state.max_iterations
+      ? `${props.state.iteration ?? 0} / ${props.state.max_iterations}`
+      : props.state.iteration ?? 0,
+  },
+  { label: t('event.toolLoop.toolCallsMade'), value: props.state.tool_calls_made ?? 0 },
+  { label: t('event.toolLoop.messages'), value: props.state.messages.length },
+  { label: t('event.toolLoop.offeredTools'), value: (props.state.tools ?? []).map(tool => tool.name) },
+  {
+    label: t('event.toolLoop.condensedResults'),
+    value: props.state.condensed_tool_call_ids?.length || null,
+  },
+  {
+    label: t('event.toolLoop.needsCondensing'),
+    value: props.state.needs_condensing ? t('event.parts.yes') : null,
+  },
+])
+</script>

package/components/Event/Display/ReadAttachedFilesEvent.vue

@@ -0,0 +1,28 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:file-2"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ReadAttachedFilesEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ReadAttachedFilesEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.files'), value: (props.event.event.files ?? []).map(file => file.filename) },
+  { label: t('event.capability.query'), value: props.event.event.query },
+  { label: t('event.capability.reserveTokens'), value: props.event.event.reserve_tokens || null },
+  { label: t('event.capability.toolCall'), value: props.event.event.tool_call_id },
+])
+</script>