@swiss-ai-hub/web 0.290.11

package/components/Event/Display/AddMemoryToChatHistoryEvent.vue

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

package/components/Event/Display/AgentInTheLoopRequestEvent.vue

@@ -0,0 +1,56 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:robot-sad"
+  >
+    <div class="flex flex-col gap-2">
+      <div class="flex gap-2">
+        <Avatar
+          size="large"
+          icon="pi pi-verified"
+        />
+        <div
+          class="mb-1 flex flex-col justify-center"
+        >
+          <p class="text-sm font-bold">
+            {{ event.event.other_agent_topic.agent_class }}
+          </p>
+          <p class="text-sm">
+            {{ event.event.other_agent_topic.agent_id }}
+          </p>
+        </div>
+      </div>
+      <component
+        :is="vueComponent"
+        :event="wrappedStartEvent"
+        :thread="thread"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { AgentInTheLoopRequestEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: AgentInTheLoopRequestEvent }
+  thread: ThreadDto
+}>()
+
+const { resolveComponentForEvent } = useEventComponent()
+
+const vueComponent = computed(() => {
+  return resolveComponentForEvent(wrappedStartEvent.value)
+})
+
+const wrappedStartEvent = computed<ContextualizedAgentEvent>(() => {
+  return {
+    ...props.event,
+    ...props.event.event.start_event,
+    event_display_name: props.event.event.start_event.display_name[props.event.locale],
+    event_display_description: props.event.event.start_event.display_description[props.event.locale],
+    event: props.event.event.start_event,
+  }
+})
+</script>

package/components/Event/Display/AgentInTheLoopResponseEvent.vue

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

package/components/Event/Display/Base.vue

@@ -0,0 +1,125 @@
+<template>
+  <Card
+    class="card !rounded-2xl"
+    :class="{
+      'striped-bg': isExternal || !isFromAgentInThread,
+      'border-2 border-red-500 dark:!border-red-900': isError,
+      'border-2 border-yellow-500 dark:!border-yellow-700': isWarning,
+      'border border-surface-50 dark:!border-surface-850': !isError && !isWarning,
+    }"
+  >
+    <template #header>
+      <div
+        class="absolute -top-3 right-12 rounded px-2 py-1 text-xs text-surface-500 dark:text-surface-400"
+        :class="{
+          'bg-red-500 text-white dark:!bg-red-900': isError,
+          'bg-yellow-500 text-white dark:!bg-yellow-700': isWarning,
+          'bg-white dark:!bg-surface-900': !isError && !isWarning,
+        }"
+      >
+        {{ event.agent_class }}
+      </div>
+    </template>
+    <template #content>
+      <Panel
+        toggleable
+        collapsed
+        class="border-none bg-transparent"
+      >
+        <template #header>
+          <div class="relative flex flex-row items-center gap-4">
+            <div class="w-8 pt-1">
+              <Icon
+                :name="icon ?? 'hugeicons:question'"
+                class="size-5"
+              />
+            </div>
+            <p class="font-semibold">
+              {{ event.event_display_name }}
+            </p>
+          </div>
+        </template>
+        <div>
+          <div class="flex items-start justify-between gap-4">
+            <p class="flex-1 text-sm text-surface-800 dark:text-surface-200">
+              {{ event.event_display_description }}
+            </p>
+            <Button
+              variant="text"
+              class="text-xs text-surface-500 underline hover:text-surface-700 dark:text-surface-400 dark:hover:text-surface-300"
+              @click="showRawData = !showRawData"
+            >
+              {{ showRawData ? t('event.base.view_formatted') : t('event.base.view_raw_data') }}
+            </Button>
+          </div>
+
+          <div v-if="!isEmpty && !showRawData">
+            <Divider />
+            <br>
+            <div class="pb-3 pr-3 ">
+              <slot />
+            </div>
+          </div>
+
+          <EventDisplayRawDataContent
+            v-if="showRawData"
+            :event="event"
+          />
+        </div>
+      </Panel>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import type { MinimalAgentInstanceDto, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  event: ContextualizedAgentEvent
+  thread: ThreadDto
+  icon: string
+  isExternal?: boolean
+  isEmpty?: boolean
+  isWarning?: boolean
+  isError?: boolean
+}>(), {
+  isExternal: false,
+  isEmpty: false,
+  isWarning: false,
+  isError: false,
+})
+
+const { t } = useI18n()
+
+const showRawData = ref(false)
+
+const agentIds = computed<string[]>(() => {
+  const agents = props.thread.agents ?? []
+  return agents.map((agent: MinimalAgentInstanceDto) => `${agent.agent_class}/${agent.agent_id}`)
+})
+
+const isFromAgentInThread = computed<boolean>(() => {
+  return agentIds.value.includes(`${props.event.agent_class}/${props.event.agent_id}`)
+})
+</script>
+
+<style scoped>
+.card :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+.card :deep(.p-card-body) {
+  padding: 0 5px 0 15px !important;
+}
+.card :deep(.p-panel-content) {
+  padding: 0 !important;
+}
+.striped-bg {
+  background: repeating-linear-gradient(
+    -55deg,
+    rgba(155, 155, 155, 0.08),
+    rgba(155, 155, 155, 0.08) 4px,
+    rgba(155, 155, 155, 0) 4px,
+    rgba(155, 155, 155, 0) 8px
+  );
+}
+</style>

package/components/Event/Display/BaseRetrieveMemoryEvent.vue

@@ -0,0 +1,101 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="lucide:brain"
+  >
+    <div class="flex flex-col gap-6">
+      <!-- Retrieved Memories Section -->
+      <div
+        v-if="event.event.memories?.length"
+        class="flex flex-col gap-3"
+      >
+        <div class="flex items-center gap-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+          <Icon
+            name="lucide:brain"
+            class="size-4"
+          />
+          <span>{{ t('event.retrieveMemory.memories') }} ({{ event.event.memories.length }})</span>
+        </div>
+
+        <div
+          v-for="memory in event.event.memories"
+          :key="memory.id"
+          class="flex flex-col gap-2 rounded-lg border border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800"
+        >
+          <div class="text-base">
+            {{ memory.memory }}
+          </div>
+          <div class="flex items-center gap-4 text-xs text-surface-500 dark:text-surface-400">
+            <span
+              v-if="memory.score != null"
+              class="flex items-center gap-1"
+            >
+              <Icon
+                name="lucide:star"
+                class="size-3"
+              />
+              {{ t('event.retrieveMemory.score') }}: {{ memory.score.toFixed(2) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <Icon
+                name="lucide:calendar"
+                class="size-3"
+              />
+              {{ formatDate(memory.created_at) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('event.retrieveMemory.noMemories') }}
+      </div>
+
+      <!-- Knowledge Graph Section -->
+      <div
+        v-if="event.event.relations?.length"
+        class="flex flex-col gap-3"
+      >
+        <div class="flex items-center gap-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+          <Icon
+            name="lucide:network"
+            class="size-4"
+          />
+          <span>{{ t('event.retrieveMemory.relations') }} ({{ event.event.relations.length }})</span>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700">
+          <MemoryGraph
+            :relations="event.event.relations"
+            height="300px"
+          />
+        </div>
+      </div>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { BaseRetrieveMemoryEventReadable, ThreadDto, AgentEventReadable } from '@core/sdk/client'
+
+defineProps<{
+  event: AgentEventReadable & { event: BaseRetrieveMemoryEventReadable }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const formatDate = (dateString: string): string => {
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString()
+  }
+  catch {
+    return dateString
+  }
+}
+</script>

package/components/Event/Display/BaseStoreMemoryEvent.vue

@@ -0,0 +1,182 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="lucide:database-zap"
+  >
+    <div class="flex flex-col gap-6">
+      <!-- Memory Changes Section -->
+      <div
+        v-if="hasMemoryChanges"
+        class="flex flex-col gap-4"
+      >
+        <div class="flex items-center gap-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+          <Icon
+            name="lucide:file-edit"
+            class="size-4"
+          />
+          <span>{{ t('event.storeMemory.title') }}</span>
+        </div>
+
+        <!-- Added Memories -->
+        <div
+          v-if="event.event.added_memories?.length"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center gap-2 text-sm font-medium text-green-700 dark:text-green-400">
+            <Icon
+              name="lucide:plus-circle"
+              class="size-4"
+            />
+            <span>{{ t('event.storeMemory.added') }} ({{ event.event.added_memories.length }})</span>
+          </div>
+          <div class="flex flex-col gap-2 pl-6">
+            <div
+              v-for="(memory, index) in event.event.added_memories"
+              :key="`added-${index}`"
+              class="flex items-start gap-2 text-sm"
+            >
+              <span class="text-green-600 dark:text-green-400">•</span>
+              <span class="flex-1">{{ memory }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Updated Memories -->
+        <div
+          v-if="event.event.updated_memories?.length"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center gap-2 text-sm font-medium text-blue-700 dark:text-blue-400">
+            <Icon
+              name="lucide:pencil"
+              class="size-4"
+            />
+            <span>{{ t('event.storeMemory.updated') }} ({{ event.event.updated_memories.length }})</span>
+          </div>
+          <div class="flex flex-col gap-2 pl-6">
+            <div
+              v-for="(memory, index) in event.event.updated_memories"
+              :key="`updated-${index}`"
+              class="flex items-start gap-2 text-sm"
+            >
+              <span class="text-blue-600 dark:text-blue-400">•</span>
+              <span class="flex-1">{{ memory }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Deleted Memories -->
+        <div
+          v-if="event.event.deleted_memories?.length"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center gap-2 text-sm font-medium text-red-700 dark:text-red-400">
+            <Icon
+              name="lucide:trash-2"
+              class="size-4"
+            />
+            <span>{{ t('event.storeMemory.deleted') }} ({{ event.event.deleted_memories.length }})</span>
+          </div>
+          <div class="flex flex-col gap-2 pl-6">
+            <div
+              v-for="(memory, index) in event.event.deleted_memories"
+              :key="`deleted-${index}`"
+              class="flex items-start gap-2 text-sm line-through opacity-60"
+            >
+              <span class="text-red-600 dark:text-red-400">•</span>
+              <span class="flex-1">{{ memory }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('event.storeMemory.noChanges') }}
+      </div>
+
+      <!-- Relation Changes Graph -->
+      <div
+        v-if="hasRelationChanges"
+        class="flex flex-col gap-3"
+      >
+        <div class="flex items-center gap-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+          <Icon
+            name="lucide:network"
+            class="size-4"
+          />
+          <span>{{ t('event.storeMemory.relationChanges') }}</span>
+        </div>
+
+        <div class="flex flex-col gap-2 text-xs text-surface-600 dark:text-surface-400">
+          <div
+            v-if="event.event.added_relations?.length"
+            class="flex items-center gap-2"
+          >
+            <Icon
+              name="lucide:plus-circle"
+              class="size-3 text-green-600 dark:text-green-400"
+            />
+            <span>{{ event.event.added_relations.length }} {{ t('event.storeMemory.addedRelations') }}</span>
+          </div>
+          <div
+            v-if="event.event.deleted_relations?.length"
+            class="flex items-center gap-2"
+          >
+            <Icon
+              name="lucide:trash-2"
+              class="size-3 text-red-600 dark:text-red-400"
+            />
+            <span>{{ event.event.deleted_relations.length }} {{ t('event.storeMemory.deletedRelations') }}</span>
+          </div>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700">
+          <MemoryGraph
+            :relations="allRelations"
+            :highlighted-relations="event.event.added_relations"
+            height="300px"
+          />
+        </div>
+      </div>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { BaseStoreMemoryEventReadable, ThreadDto, AgentEventReadable } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: AgentEventReadable & { event: BaseStoreMemoryEventReadable }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const hasMemoryChanges = computed(() => {
+  return (
+    (props.event.event.added_memories?.length ?? 0) > 0
+    || (props.event.event.updated_memories?.length ?? 0) > 0
+    || (props.event.event.deleted_memories?.length ?? 0) > 0
+  )
+})
+
+const hasRelationChanges = computed(() => {
+  return (
+    (props.event.event.added_relations?.length ?? 0) > 0
+    || (props.event.event.deleted_relations?.length ?? 0) > 0
+  )
+})
+
+const allRelations = computed(() => {
+  return [
+    ...(props.event.event.added_relations ?? []),
+    ...(props.event.event.deleted_relations ?? []),
+  ]
+})
+</script>

package/components/Event/Display/ChunkEvent.vue

@@ -0,0 +1,40 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:note"
+  >
+    <div class="py-5">
+      <ChatMessage
+        :message="message"
+        :name="`${event.agent_class}/${event.agent_id}`"
+        :email="event.event.model_name"
+        :date="new Date(event.event.created_at / 1_000_000)"
+        :icon="agentIcon"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessage, ChunkEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ChunkEvent }
+  thread: ThreadDto
+}>()
+
+const agentIcon = useAgentIconFromThread(props.event, props.thread)
+
+const message = computed<ChatMessage>(() => {
+  return {
+    role: 'assistant',
+    blocks: [
+      {
+        block_type: 'text',
+        text: props.event.event.content,
+      },
+    ],
+  }
+})
+</script>

package/components/Event/Display/EmbeddingEvent.vue

@@ -0,0 +1,25 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:search"
+  >
+    <IconField class="w-full">
+      <InputIcon class="pi pi-search" />
+      <InputText
+        :model-value="event.event.text"
+        class="w-full"
+        readonly
+      />
+    </IconField>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { EmbeddingEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: EmbeddingEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/ExceptionEvent.vue

@@ -0,0 +1,21 @@
+<template>
+  <EventDisplayBase
+    is-error
+    :event="event"
+    :thread="thread"
+    icon="mingcute:thought-fill"
+  >
+    <p class="pl-6 font-bold">
+      {{ event.event.message }}
+    </p>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ExceptionEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ExceptionEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/GuardAcceptEvent.vue

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

package/components/Event/Display/GuardEvent.vue

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