@swiss-ai-hub/web 0.290.11

package/components/Memory/Edit.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="flex h-full flex-col space-y-4">
+    <div class="flex-1 space-y-4 overflow-y-auto">
+      <div class="space-y-2">
+        <label
+          for="memory-content-textarea"
+          class="text-xs font-medium text-gray-700 dark:text-gray-500"
+        >{{ t('memory.edit.memory_content_label') }}</label>
+        <Textarea
+          v-if="isEditing"
+          v-model="editedData"
+          input-id="memory-content-textarea"
+          auto-resize
+          rows="5"
+          class="w-full"
+        />
+        <div
+          v-else
+          class="rounded border bg-surface-50 p-3 dark:border-surface-800 dark:bg-surface-950"
+        >
+          {{ memory.memory }}
+        </div>
+      </div>
+
+      <div class="space-y-4">
+        <!-- Created At - always shown -->
+        <div class="space-y-2">
+          <p class="text-xs font-medium text-gray-500">
+            {{ t('memory.detail.created_at') }}
+          </p>
+          <div class="text-sm">
+            {{ new Date(memory.created_at).toLocaleString() }}
+          </div>
+        </div>
+
+        <!-- Agent Link - shown if agent exists -->
+        <!-- Follows the AgentAvatar pattern from Thread/Info.vue but simplified -->
+        <div
+          v-if="canNavigateToAgent"
+          class="space-y-2"
+        >
+          <p class="text-xs font-medium text-gray-500">
+            {{ t('memory.detail.agent_link_label') }}
+          </p>
+          <div
+            class="flex cursor-pointer gap-2 rounded border border-surface-200 p-2 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+            @click="navigateToAgent"
+          >
+            <Avatar
+              size="normal"
+              icon="pi pi-verified"
+            />
+            <div class="mb-1 flex flex-col justify-center">
+              <p class="text-xs font-bold">
+                {{ parsedAgent.agent_class }}
+              </p>
+              <p class="text-xs">
+                {{ parsedAgent.agent_class }} / {{ parsedAgent.agent_id }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Thread/Display Link - shown if both thread_id and display_id exist -->
+        <!-- Similar pattern to agent but with thread/conversation icon -->
+        <div
+          v-if="canNavigateToThread"
+          class="space-y-2"
+        >
+          <p class="text-xs font-medium text-gray-500">
+            {{ t('memory.detail.thread_link_label') }}
+          </p>
+          <div
+            class="flex cursor-pointer gap-2 rounded border border-surface-200 p-2 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+            @click="navigateToThreadDisplay"
+          >
+            <Avatar
+              size="normal"
+              icon="pi pi-comments"
+            />
+            <div class="mb-1 flex flex-col justify-center">
+              <p class="text-xs font-bold">
+                {{ t('memory.detail.thread_title') }}
+              </p>
+              <p class="font-mono text-xs">
+                {{ memory.thread_id?.substring(0, 8) }}... / {{ memory.display_id?.substring(0, 8) }}...
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between border-t pt-4">
+      <Button
+        v-if="!isEditing"
+        :label="t('memory.edit.edit_button')"
+        icon="pi pi-pencil"
+        @click="isEditing = true"
+      />
+      <div
+        v-else
+        class="flex space-x-2"
+      >
+        <Button
+          :label="t('memory.edit.save_button')"
+          icon="pi pi-check"
+          @click="handleSave"
+        />
+        <Button
+          :label="t('memory.edit.cancel_button')"
+          icon="pi pi-times"
+          severity="secondary"
+          @click="handleCancel"
+        />
+      </div>
+
+      <Button
+        :label="t('memory.edit.delete_button')"
+        icon="pi pi-trash"
+        severity="danger"
+        @click="handleDelete"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref, watch } from 'vue'
+
+import type { MemoryDto } from '@core/sdk/client'
+
+interface Props {
+  memory: MemoryDto
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  update: [data: string]
+  delete: []
+  close: []
+}>()
+
+const confirm = useConfirm()
+const toast = useToast()
+const { t } = useI18n()
+const router = useRouter()
+const tenantPath = useTenantPath()
+
+const editedData = ref('')
+const isEditing = ref(false)
+
+watch(() => props.memory, (newMemory) => {
+  editedData.value = newMemory.memory
+  isEditing.value = false
+}, { immediate: true })
+
+const handleSave = () => {
+  if (!editedData.value.trim()) {
+    toast.add({
+      severity: 'warn',
+      summary: t('memory.edit.validation_error'),
+      detail: t('memory.edit.validation_empty'),
+      life: 3000,
+    })
+    return
+  }
+
+  emit('update', editedData.value)
+  isEditing.value = false
+}
+
+const handleCancel = () => {
+  editedData.value = props.memory.memory
+  isEditing.value = false
+}
+
+const handleDelete = () => {
+  confirm.require({
+    message: t('memory.edit.delete_confirm_message'),
+    header: t('memory.edit.delete_confirm_header'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: t('memory.edit.cancel_button'),
+      severity: 'secondary',
+      outlined: true,
+    },
+    acceptProps: {
+      label: t('memory.edit.delete_button'),
+      severity: 'danger',
+    },
+    accept: () => {
+      emit('delete')
+    },
+  })
+}
+
+// Parse agent_id from "agent_class/agent_id" format
+const parsedAgent = computed(() => {
+  if (!props.memory.agent_id) return null
+  const parts = props.memory.agent_id.split('/')
+  if (parts.length !== 2) return null
+  return { agent_class: parts[0], agent_id: parts[1] }
+})
+
+// Check if we can navigate to agent
+const canNavigateToAgent = computed(() => parsedAgent.value !== null)
+
+// Check if we can navigate to thread/display (both must exist)
+const canNavigateToThread = computed(() => {
+  return !!props.memory.thread_id && !!props.memory.display_id
+})
+
+// Construct agent URL
+const agentUrl = computed(() => {
+  if (!parsedAgent.value) return ''
+  return `/service/agents/${parsedAgent.value.agent_class}-${parsedAgent.value.agent_id}/overview`
+})
+
+// Construct thread/display URL
+const threadDisplayUrl = computed(() => {
+  if (!canNavigateToThread.value) return ''
+  return `/service/threads/${props.memory.thread_id}/display/${props.memory.display_id}`
+})
+
+const navigateToAgent = () => {
+  if (canNavigateToAgent.value) {
+    router.push(tenantPath(agentUrl.value))
+  }
+}
+
+const navigateToThreadDisplay = () => {
+  if (canNavigateToThread.value) {
+    router.push(tenantPath(threadDisplayUrl.value))
+  }
+}
+</script>

package/components/Memory/Graph.vue

@@ -0,0 +1,318 @@
+<template>
+  <div
+    ref="container"
+    class="relative size-full overflow-hidden"
+    :style="{ minHeight: props.height }"
+  />
+</template>
+
+<script setup lang="ts">
+import { EdgeCurvedArrowProgram } from '@sigma/edge-curve'
+import Graph from 'graphology'
+import forceAtlas2 from 'graphology-layout-forceatlas2'
+import Sigma from 'sigma'
+import { createEdgeArrowProgram } from 'sigma/rendering'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import type { MemoryRelationDto } from '@core/sdk/client'
+
+interface Props {
+  relations: MemoryRelationDto[]
+  selectedMemoryId?: string
+  highlightedRelations?: MemoryRelationDto[]
+  height?: string
+}
+
+interface Colors {
+  nodeActive: string
+  nodeInactive: string
+  nodeSelected: string
+  edgeActive: string
+  edgeInactive: string
+  labelColor: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: '800px',
+})
+const emit = defineEmits<{ selectNode: [nodeId: string] }>()
+
+const { myUser } = useMyUser()
+const isDark = useDarkMode()
+const container = ref<HTMLDivElement>()
+
+let sigma: Sigma | null = null
+let graph: Graph | null = null
+let resizeObserver: ResizeObserver | null = null
+let renderedWithValidSize = false
+
+const MIN_NODE_SIZE = 10
+const MAX_NODE_SIZE = 50
+const EDGE_CURVATURE = 0.4
+
+const CustomArrowProgram = createEdgeArrowProgram({
+  widenessToThicknessRatio: 3,
+  lengthToThicknessRatio: 4,
+})
+
+const isHighlightActive = computed(() => !!props.highlightedRelations)
+
+const relevantRelationKeys = computed(() => {
+  if (!props.highlightedRelations) return new Set<string>()
+  return new Set(
+    props.highlightedRelations.map((r, i) => `${r.source}-${r.relation}-${r.target}-${i}`),
+  )
+})
+
+const hashString = (str: string): number => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i)
+    hash = hash & hash
+  }
+  return Math.abs(hash)
+}
+
+const getDeterministicPosition = (id: string, seed: string, index: number): number => {
+  const hash = hashString(id + seed)
+  const offset = (index * 0.001) % 1
+  return ((hash % 1000) / 1000 + offset) % 1
+}
+
+const getCssVar = (varName: string): string => {
+  if (typeof window === 'undefined') return '#000000'
+  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
+}
+
+const getColors = (): Colors => ({
+  nodeActive: getCssVar('--p-primary-color'),
+  nodeInactive: getCssVar('--p-surface-500'),
+  nodeSelected: getCssVar('--p-red-600'),
+  edgeActive: getCssVar('--p-surface-600'),
+  edgeInactive: getCssVar('--p-surface-400'),
+  labelColor: getCssVar('--p-primary-color'),
+})
+
+const isNodeRelevant = (nodeId: string): boolean => {
+  if (!isHighlightActive.value) return true
+  // A node is relevant if it appears in any highlighted relation
+  return props.highlightedRelations?.some(r => r.source === nodeId || r.target === nodeId) ?? false
+}
+
+const isEdgeRelevant = (edgeKey: string): boolean => {
+  return !isHighlightActive.value || relevantRelationKeys.value.has(edgeKey)
+}
+
+const lerp = (min: number, max: number, t: number): number => {
+  return min + t * (max - min)
+}
+
+const calculateNodeSize = (degree: number, minDegree: number, maxDegree: number): number => {
+  if (maxDegree === minDegree) return (MIN_NODE_SIZE + MAX_NODE_SIZE) / 2
+  const t = (degree - minDegree) / (maxDegree - minDegree)
+  return lerp(MIN_NODE_SIZE, MAX_NODE_SIZE, t)
+}
+
+/**
+ * Creates a canonical key for a pair of nodes (order-independent)
+ */
+const getNodePairKey = (source: string, target: string): string => {
+  return [source, target].sort().join('::')
+}
+
+/**
+ * Detects parallel edges and assigns curvature to them
+ */
+const assignEdgeCurvatures = (g: Graph): void => {
+  const edgesByPair = new Map<string, string[]>()
+
+  g.forEachEdge((edge, _attrs, source, target) => {
+    const pairKey = getNodePairKey(source, target)
+    if (!edgesByPair.has(pairKey)) {
+      edgesByPair.set(pairKey, [])
+    }
+    edgesByPair.get(pairKey)!.push(edge)
+  })
+
+  edgesByPair.forEach((edges) => {
+    if (edges.length === 1) {
+      g.setEdgeAttribute(edges[0], 'curvature', 0)
+      g.setEdgeAttribute(edges[0], 'type', 'straight')
+    }
+    else {
+      // Spread all parallel edges evenly
+      // For 2 edges: indices 0,1 → offsets -0.5, +0.5
+      // For 3 edges: indices 0,1,2 → offsets -1, 0, +1
+      edges.forEach((edge, index) => {
+        const spreadFactor = index - (edges.length - 1) / 2
+        const curvature = spreadFactor * EDGE_CURVATURE
+
+        g.setEdgeAttribute(edge, 'curvature', curvature)
+        g.setEdgeAttribute(edge, 'type', curvature === 0 ? 'straight' : 'curved')
+      })
+    }
+  })
+}
+
+const buildGraph = (colors: Colors): Graph => {
+  const g = new Graph({ multi: true, type: 'directed' })
+
+  if (!props.relations?.length) return g
+
+  const nodeSet = new Set<string>()
+  props.relations.forEach((rel) => {
+    nodeSet.add(rel.source)
+    nodeSet.add(rel.target)
+  })
+
+  Array.from(nodeSet).forEach((node, index) => {
+    const isCurrentUser = myUser.value?.id === node
+    const label = isCurrentUser ? (myUser.value?.name ?? node) : node
+
+    g.addNode(node, {
+      label,
+      x: getDeterministicPosition(node, 'x', index),
+      y: getDeterministicPosition(node, 'y', index),
+    })
+  })
+
+  props.relations.forEach((rel, index) => {
+    const edgeKey = `${rel.source}-${rel.relation}-${rel.target}-${index}`
+    const relevant = isEdgeRelevant(edgeKey)
+    g.addEdge(rel.source, rel.target, {
+      label: rel.relation,
+      size: relevant ? 4 : 2,
+      color: relevant ? colors.edgeActive : colors.edgeInactive,
+      labelColor: colors.labelColor,
+      forceLabel: true,
+    }, `edge-${index}`)
+  })
+
+  // Assign curvatures to handle parallel/bidirectional edges
+  assignEdgeCurvatures(g)
+
+  const degrees = g.mapNodes(node => g.degree(node))
+  const minDegree = Math.min(...degrees)
+  const maxDegree = Math.max(...degrees)
+
+  g.forEachNode((node) => {
+    const degree = g.degree(node)
+    const size = calculateNodeSize(degree, minDegree, maxDegree)
+    const relevant = isNodeRelevant(node)
+
+    g.setNodeAttribute(node, 'baseSize', size)
+    g.setNodeAttribute(node, 'size', size)
+    g.setNodeAttribute(node, 'color', relevant ? colors.nodeActive : colors.nodeInactive)
+    g.setNodeAttribute(node, 'labelColor', colors.labelColor)
+  })
+
+  return g
+}
+
+const applyLayout = (g: Graph): void => {
+  if (g.order === 0) return
+  forceAtlas2.assign(g, {
+    iterations: 300,
+    settings: {
+      gravity: 0.15, // was 0.3 - lower to give more room
+      scalingRatio: 70, // was 50 - slightly more repulsion
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      strongGravityMode: false,
+      linLogMode: false,
+      outboundAttractionDistribution: true,
+    },
+  })
+}
+
+const highlightSelectedNode = (nodeId: string | undefined, colors: Colors): void => {
+  if (!graph || !nodeId || !graph.hasNode(nodeId)) return
+  graph.setNodeAttribute(nodeId, 'color', colors.nodeSelected)
+}
+
+const renderGraph = (): void => {
+  if (!container.value) return
+
+  const { width } = container.value.getBoundingClientRect()
+  if (width > 0) renderedWithValidSize = true
+
+  sigma?.kill()
+  sigma = null
+
+  const colors = getColors()
+  graph = buildGraph(colors)
+  applyLayout(graph)
+
+  sigma = new Sigma(graph, container.value, {
+    renderEdgeLabels: true,
+    allowInvalidContainer: true,
+    labelSize: 12,
+    labelWeight: 'bold',
+    labelRenderedSizeThreshold: 5,
+    labelDensity: 0.5,
+    labelGridCellSize: 100,
+    edgeLabelSize: 10,
+    labelColor: { attribute: 'labelColor', color: colors.labelColor },
+    edgeLabelColor: { attribute: 'labelColor', color: colors.labelColor },
+    defaultEdgeType: 'straight',
+    edgeProgramClasses: {
+      straight: CustomArrowProgram,
+      curved: EdgeCurvedArrowProgram,
+    },
+  })
+
+  sigma.on('clickNode', ({ node }) => emit('selectNode', node))
+
+  highlightSelectedNode(props.selectedMemoryId, colors)
+  sigma.refresh()
+}
+
+watch(
+  () => [props.relations, props.highlightedRelations],
+  () => renderGraph(),
+  { deep: true },
+)
+
+watch(
+  () => props.selectedMemoryId,
+  (newId, oldId) => {
+    if (!graph || !sigma) return
+
+    const colors = getColors()
+
+    if (oldId && graph.hasNode(oldId)) {
+      const baseSize = graph.getNodeAttribute(oldId, 'baseSize') as number
+      graph.setNodeAttribute(oldId, 'size', baseSize)
+      graph.setNodeAttribute(oldId, 'color', isNodeRelevant(oldId) ? colors.nodeActive : colors.nodeInactive)
+    }
+
+    highlightSelectedNode(newId, colors)
+    sigma.refresh()
+  },
+)
+
+watch(isDark, async () => {
+  await nextTick()
+  renderGraph()
+})
+
+onMounted(() => {
+  renderGraph()
+
+  if (container.value) {
+    resizeObserver = new ResizeObserver(() => {
+      if (!container.value || renderedWithValidSize) return
+      const { width } = container.value.getBoundingClientRect()
+      if (width > 0) {
+        renderGraph()
+      }
+    })
+    resizeObserver.observe(container.value)
+  }
+})
+
+onUnmounted(() => {
+  sigma?.kill()
+  resizeObserver?.disconnect()
+})
+</script>

package/components/Memory/List.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="flex h-full flex-col">
+    <DataTable
+      :value="memories"
+      :loading="loading"
+      :selection="selectedMemory"
+      selection-mode="single"
+      :meta-key-selection="false"
+      data-key="id"
+      class="flex-1"
+      size="small"
+      scrollable
+      scroll-height="flex"
+      striped-rows
+      @update:selection="handleSelection"
+    >
+      <Column
+        field="memory"
+        :header="t('memory.table.memory')"
+        style="min-width: 300px"
+      >
+        <template #body="slotProps">
+          <div class="line-clamp-2 text-surface-700 dark:text-surface-200">
+            {{ slotProps.data.memory }}
+          </div>
+        </template>
+      </Column>
+
+      <Column
+        v-if="!hideAgentColumn"
+        field="agent_id"
+        :header="t('memory.table.agent')"
+        style="width: 200px"
+      >
+        <template #body="slotProps">
+          <Tag
+            v-if="slotProps.data.agent_id"
+            :value="slotProps.data.agent_id"
+            severity="secondary"
+            class="font-mono"
+          />
+          <span
+            v-else
+            class="text-surface-400 dark:text-surface-500"
+          >-</span>
+        </template>
+      </Column>
+      <Column
+        field="created"
+        :header="t('memory.table.created')"
+        style="width: 160px"
+      >
+        <template #body="slotProps">
+          <div class="flex flex-col">
+            <span class="text-sm font-medium text-surface-700 dark:text-surface-200">
+              {{ useDateFormat(slotProps.data.created, 'DD.MM.YYYY') }}
+            </span>
+            <span class="text-xs text-surface-500 dark:text-surface-400">
+              {{ useDateFormat(slotProps.data.created, 'HH:mm:ss') }}
+            </span>
+          </div>
+        </template>
+      </Column>
+      <Column
+        field="score"
+        :header="t('memory.table.score')"
+        style="width: 120px"
+      >
+        <template #body="slotProps">
+          <Tag
+            v-if="slotProps.data.score != null"
+            :value="slotProps.data.score.toFixed(2)"
+            :severity="getScoreSeverity(slotProps.data.score)"
+            rounded
+          />
+          <span
+            v-else
+            class="text-surface-400 dark:text-surface-500"
+          >-</span>
+        </template>
+      </Column>
+    </DataTable>
+
+    <div
+      v-if="totalPages > 1"
+      class="flex items-center justify-between border-t p-4"
+    >
+      <Button
+        icon="pi pi-chevron-left"
+        :disabled="currentPage === 1"
+        text
+        @click="emit('prevPage')"
+      />
+      <span class="text-sm text-gray-600">
+        {{ t('memory.table.pagination', { currentPage, totalPages }) }}
+      </span>
+      <Button
+        icon="pi pi-chevron-right"
+        :disabled="currentPage === totalPages"
+        text
+        @click="emit('nextPage')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { MemoryDto } from '@core/sdk/client'
+
+interface Props {
+  memories: MemoryDto[]
+  loading?: boolean
+  currentPage: number
+  totalPages: number
+  selectedMemoryId?: string
+  hideAgentColumn?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  selectMemory: [memory: MemoryDto]
+  nextPage: []
+  prevPage: []
+  goToPage: [page: number]
+}>()
+
+const selectedMemory = computed(() => {
+  return props.memories.find(memory => memory.id === props.selectedMemoryId)
+})
+
+const { t } = useI18n()
+
+const handleSelection = (memory: MemoryDto) => {
+  emit('selectMemory', memory)
+}
+
+const getScoreSeverity = (score: number) => {
+  if (score >= 0.8) return 'success'
+  if (score >= 0.6) return 'info'
+  if (score >= 0.4) return 'warn'
+  return 'danger'
+}
+</script>
+
+<style scoped>
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>