@swiss-ai-hub/web 0.290.11

package/components/Memory/MemoryManagementPage.vue

@@ -0,0 +1,178 @@
+<template>
+  <StructuralColumn
+    :title="t(`${translationPrefix}.memories.title`)"
+    :loading="memoriesAreLoading || contextLoading"
+  >
+    <div class="flex h-full flex-col gap-2">
+      <div class="mb-4">
+        <span class="text-sm text-surface-500 dark:text-surface-400">
+          {{ t(`${translationPrefix}.memories.description`, { [contextNameKey]: contextName }) }}
+        </span>
+      </div>
+
+      <div class="flex w-full items-center justify-between gap-2">
+        <div class="flex flex-1 items-center gap-2">
+          <IconField class="flex-1">
+            <InputIcon>
+              <i class="pi pi-search" />
+            </InputIcon>
+            <InputText
+              v-model="searchInput"
+              :placeholder="t('memory.search.placeholder')"
+              class="w-full"
+              @keyup.enter="handleSearch"
+            />
+          </IconField>
+          <Button
+            icon="pi pi-search"
+            :label="t('memory.search.button')"
+            :loading="isSearchButtonLoading"
+            @click="handleSearch"
+          />
+          <Button
+            v-if="isSearchActive"
+            icon="pi pi-times"
+            severity="secondary"
+            :label="t('memory.search.clear')"
+            @click="handleClearSearch"
+          />
+        </div>
+        <Button
+          v-tooltip.top="t('memory.delete_all.button')"
+          icon="pi pi-trash"
+          severity="danger"
+          text
+          rounded
+          @click="handleDeleteAll"
+        />
+      </div>
+
+      <div class="flex-1">
+        <MemoryList
+          :memories="displayedMemories"
+          :current-page="displayedCurrentPage"
+          :total-pages="displayedTotalPages"
+          :selected-memory-id="selectedMemoryId"
+          :hide-agent-column="hideAgentColumn"
+          @select-memory="handleSelectMemory"
+          @next-page="nextPage"
+          @prev-page="prevPage"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+
+  <NuxtPage :selected-memory-id="selectedMemoryId" />
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+
+interface Props {
+  translationPrefix: 'thread' | 'agent'
+  contextName: string
+  contextLoading: boolean
+  memoryContext: {
+    type: 'user'
+    thread_id?: string
+    agent_class?: string
+    agent_id?: string
+  }
+  basePath: string
+  hideAgentColumn?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideAgentColumn: false,
+})
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const confirm = useConfirm()
+const toast = useToast()
+
+// Context-specific key for translation (threadName vs agentName)
+const contextNameKey = computed(() => {
+  return props.translationPrefix === 'thread' ? 'threadName' : 'agentName'
+})
+
+// Create memory composables with provided context
+const { useMemories, useMemorySearch, useDeleteMemory } = createMemoryComposables(props.memoryContext)
+
+const {
+  paginatedMemories,
+  currentPage,
+  totalPages,
+  memoriesAreLoading,
+  nextPage,
+  prevPage,
+} = useMemories()
+
+const {
+  searchData,
+  searchIsLoading,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+} = useMemorySearch()
+
+const { deleteAllMemories } = useDeleteMemory()
+
+// Use shared search filter composable
+const {
+  searchInput,
+  isSearchButtonLoading,
+  displayedMemories,
+  displayedCurrentPage,
+  displayedTotalPages,
+  handleSearch,
+  handleClearSearch,
+} = useMemorySearchFilter({
+  searchData,
+  paginatedMemories,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+  searchIsLoading,
+  currentPage,
+  totalPages,
+})
+
+const selectedMemoryId = computed(() => route.params.memory_id as string | undefined)
+
+const handleSelectMemory = (memory: { id: string }) => {
+  router.push(tenantPath(`${props.basePath}/${memory.id}?q=${searchInput.value ?? ''}`))
+}
+
+const handleDeleteAll = () => {
+  confirm.require({
+    message: t(`${props.translationPrefix}.memories.delete_all.confirm_message`),
+    header: t(`${props.translationPrefix}.memories.delete_all.confirm_header`),
+    icon: 'pi pi-exclamation-triangle',
+    acceptClass: 'p-button-danger',
+    accept: async () => {
+      try {
+        await deleteAllMemories()
+        toast.add({
+          severity: 'success',
+          summary: t(`${props.translationPrefix}.memories.delete_all.success.title`),
+          detail: t(`${props.translationPrefix}.memories.delete_all.success.message`),
+          life: 3000,
+        })
+      }
+      catch (error) {
+        console.error(`Failed to delete ${props.translationPrefix} memories:`, error)
+        toast.add({
+          severity: 'error',
+          summary: t(`${props.translationPrefix}.memories.delete_all.error.title`),
+          detail: t(`${props.translationPrefix}.memories.delete_all.error.message`),
+          life: 5000,
+        })
+      }
+    },
+  })
+}
+</script>

package/components/Memory/OpenWebUIContent.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- SelectButton for List/Graph toggle -->
+    <SelectButton
+      v-model="selectedView"
+      :options="viewOptions"
+      option-label="label"
+      option-value="value"
+      size="small"
+    />
+
+    <!-- List View -->
+    <div v-if="selectedView === 'list'">
+      <div
+        v-if="agentMemoriesAreLoading"
+        class="flex items-center justify-center p-8"
+      >
+        <ProgressSpinner />
+      </div>
+      <div v-else>
+        <MemoryList
+          :memories="agentPaginatedMemories"
+          :current-page="agentCurrentPage"
+          :total-pages="agentTotalPages"
+          :hide-agent-column="true"
+          @next-page="agentNextPage"
+          @prev-page="agentPrevPage"
+        />
+      </div>
+    </div>
+
+    <!-- Graph View -->
+    <div v-else-if="selectedView === 'graph'">
+      <div
+        v-if="allMemoriesAreLoading"
+        class="flex items-center justify-center p-8"
+      >
+        <ProgressSpinner />
+      </div>
+      <div
+        v-else
+        class="h-[600px]"
+      >
+        <MemoryGraph
+          :memories="allMemoriesData?.memories || []"
+          :relations="allRelations"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  agentClass: string
+  agentId: string
+}>()
+
+const { t } = useI18n()
+
+// View selection
+const selectedView = ref<'list' | 'graph'>('list')
+const viewOptions = [
+  { label: t('openwebui.memories.list'), value: 'list' },
+  { label: t('openwebui.memories.graph'), value: 'graph' },
+]
+
+// Query 1: Agent-specific memories for LIST view (filtered by agent)
+const { useMemories: useAgentMemories } = createMemoryComposables({
+  type: 'user',
+  agent_class: props.agentClass,
+  agent_id: props.agentId,
+  // No thread_id filter - show all memories from this agent
+})
+
+const {
+  paginatedMemories: agentPaginatedMemories,
+  currentPage: agentCurrentPage,
+  totalPages: agentTotalPages,
+  memoriesAreLoading: agentMemoriesAreLoading,
+  nextPage: agentNextPage,
+  prevPage: agentPrevPage,
+} = useAgentMemories()
+
+// Query 2: ALL user memories for GRAPH view (no agent filter to get relations)
+const { useMemories: useAllMemories } = createMemoryComposables({
+  type: 'user',
+  // No filters - fetch ALL user memories to get relations across all agents
+})
+
+const {
+  memoriesData: allMemoriesData,
+  allRelations,
+  memoriesAreLoading: allMemoriesAreLoading,
+} = useAllMemories()
+</script>

package/components/Memory/PageLayout.vue

@@ -0,0 +1,72 @@
+<template>
+  <StructuralScreen>
+    <template #top>
+      <SelectButton
+        v-if="navItems"
+        :model-value="activeNavItem"
+        :options="navItems"
+        data-key="key"
+        option-label="name"
+        size="small"
+        @update:model-value="toNavItem"
+      />
+    </template>
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { NavItem } from '@core/types/NavItem'
+
+const props = defineProps<{
+  memoryType: 'user' | 'organization'
+}>()
+
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const basePath = computed(() => `/service/${props.memoryType}-memories`)
+
+const subPath = (path: string) => {
+  return `${basePath.value}/${path}`
+}
+
+onMounted(() => {
+  // Redirect to graph view by default
+  if (route.path === tenantPath(basePath.value)) {
+    router.push({
+      path: tenantPath(subPath('list')),
+      query: route.query,
+    })
+  }
+})
+
+const isActive = (path: string) => {
+  return () => {
+    const localizedPath = tenantPath(subPath(path))
+    return route.path.startsWith(localizedPath)
+  }
+}
+
+const navItems = computed<NavItem[]>(() => {
+  return [
+    { name: t('memory.list.title'), key: 'list', path: subPath('list'), isActive: isActive('list') },
+    { name: t('memory.graph.title'), key: 'graph', path: subPath('graph'), isActive: isActive('graph') },
+  ]
+})
+
+const toNavItem = (navItem: NavItem) => {
+  router.push({
+    path: tenantPath(navItem.path),
+    query: route.query,
+  })
+}
+
+const activeNavItem = computed<NavItem | undefined>(() => {
+  return navItems.value?.find(navItem => navItem.isActive())
+})
+</script>

package/components/Models/ModelDetailsPanel.vue

@@ -0,0 +1,250 @@
+<template>
+  <Accordion>
+    <AccordionPanel value="0">
+      <AccordionHeader class="text-lg font-semibold">
+        {{ t('models.modelDetails.additionalInfo') }}
+      </AccordionHeader>
+      <AccordionContent>
+        <div
+          v-if="hasAdvancedPricing"
+          class="mb-6"
+        >
+          <h4 class="mb-4 text-base font-semibold">
+            {{ t('models.modelDetails.advancedPricing') }}
+          </h4>
+          <div class="grid grid-cols-3 gap-6">
+            <div
+              v-for="priceItem in advancedPricingItems"
+              :key="priceItem.key"
+              class="flex flex-col items-start gap-2"
+            >
+              <span class="font-semibold">{{ priceItem.label }}</span>
+              <span class="text-lg font-light">${{ priceItem.value.toFixed(4) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="hasRateLimits"
+          class="mb-6"
+        >
+          <h4 class="mb-4 text-base font-semibold">
+            {{ t('models.modelDetails.rateLimits') }}
+          </h4>
+          <div class="grid grid-cols-3 gap-6">
+            <div
+              v-if="props.model.model_info?.tpm"
+              class="flex flex-col items-start gap-2"
+            >
+              <span class="font-semibold">{{ t('models.modelDetails.tokensPerMinute') }}</span>
+              <span class="text-lg font-light">{{ formatNumber(props.model.model_info.tpm) }}</span>
+            </div>
+            <div
+              v-if="props.model.model_info?.rpm"
+              class="flex flex-col items-start gap-2"
+            >
+              <span class="font-semibold">{{ t('models.modelDetails.requestsPerMinute') }}</span>
+              <span class="text-lg font-light">{{ formatNumber(props.model.model_info.rpm) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="hasCapabilities"
+          class="mb-6"
+        >
+          <h4 class="mb-4 text-base font-semibold">
+            {{ t('models.modelDetails.capabilities') }}
+          </h4>
+          <div class="flex flex-wrap gap-2">
+            <Badge
+              v-for="capability in capabilities"
+              :key="capability"
+              :value="capability"
+              severity="secondary"
+              class="text-sm"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="hasOtherDetails"
+          class="mb-6"
+        >
+          <h4 class="mb-4 text-base font-semibold">
+            {{ t('models.modelDetails.otherDetails') }}
+          </h4>
+          <div
+            class="grid grid-cols-3 gap-6
+"
+          >
+            <div
+              v-if="props.model.model_info?.output_vector_size"
+              class="flex flex-col items-start gap-2"
+            >
+              <span class="text-sm font-medium">{{ t('models.modelDetails.outputVectorSize') }}</span>
+              <Tag
+                :value="formatNumber(props.model.model_info.output_vector_size)"
+                severity="secondary"
+              />
+            </div>
+            <div
+              v-if="props.model.model_info?.supports_embedding_image_input !== null"
+              class="flex flex-col items-start gap-2"
+            >
+              <span class="text-sm font-medium">{{ t('models.modelDetails.supportsEmbeddingImageInput') }}</span>
+              <Tag
+                :value="props.model.model_info?.supports_embedding_image_input ? 'Yes' : 'No'"
+                :severity="props.model.model_info?.supports_embedding_image_input ? 'success' : 'secondary'"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.model.model_info?.supported_openai_params?.length">
+          <h4 class="mb-4 text-base font-semibold">
+            {{ t('models.modelDetails.supportedParams') }}
+          </h4>
+          <div class="flex flex-wrap gap-2">
+            <Badge
+              v-for="param in props.model.model_info.supported_openai_params"
+              :key="param"
+              :value="param"
+              severity="secondary"
+              class="text-sm"
+            />
+          </div>
+        </div>
+      </AccordionContent>
+    </AccordionPanel>
+  </Accordion>
+</template>
+
+<script setup lang="ts">
+import type { ModelDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  model: ModelDto | null
+}>()
+
+const { t } = useI18n()
+
+const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat().format(num)
+}
+
+const capabilities = computed<string[]>(() => {
+  const info = props.model?.model_info
+  if (!info) return []
+  const capabilityMap = {
+    supports_system_messages: t('models.modelDetails.supportsSystemMessages'),
+    supports_response_schema: t('models.modelDetails.supportsResponseSchema'),
+    supports_vision: t('models.modelDetails.supportsVision'),
+    supports_function_calling: t('models.modelDetails.supportsFunctionCalling'),
+    supports_tool_choice: t('models.modelDetails.supportsToolChoice'),
+    supports_assistant_prefill: t('models.modelDetails.supportsAssistantPrefill'),
+    supports_prompt_caching: t('models.modelDetails.supportsPromptCaching'),
+    supports_audio_input: t('models.modelDetails.supportsAudioInput'),
+    supports_audio_output: t('models.modelDetails.supportsAudioOutput'),
+    supports_pdf_input: t('models.modelDetails.supportsPdfInput'),
+    supports_native_streaming: t('models.modelDetails.supportsNativeStreaming'),
+    supports_web_search: t('models.modelDetails.supportsWebSearch'),
+    supports_url_context: t('models.modelDetails.supportsUrlContext'),
+    supports_reasoning: t('models.modelDetails.supportsReasoning'),
+    supports_computer_use: t('models.modelDetails.supportsComputerUse'),
+  }
+
+  return Object.keys(capabilityMap)
+    .filter(key => info[key as keyof typeof info] != null)
+    .map(key => capabilityMap[key as keyof typeof capabilityMap])
+})
+
+const advancedPricingItems = computed<Array<{ key: string, label: string, value: number }>>(() => {
+  if (!props.model?.model_info) return []
+
+  const info = props.model.model_info
+  const items = [
+    {
+      key: 'cache_creation_input_token_cost',
+      label: t('models.modelDetails.cacheCreationCost'),
+      value: info.cache_creation_input_token_cost,
+    },
+    {
+      key: 'cache_read_input_token_cost',
+      label: t('models.modelDetails.cacheReadCost'),
+      value: info.cache_read_input_token_cost,
+    },
+    {
+      key: 'input_cost_per_token_above_128k_tokens',
+      label: t('models.modelDetails.inputCostAbove128k'),
+      value: info.input_cost_per_token_above_128k_tokens,
+    },
+    {
+      key: 'input_cost_per_token_above_200k_tokens',
+      label: t('models.modelDetails.inputCostAbove200k'),
+      value: info.input_cost_per_token_above_200k_tokens,
+    },
+    {
+      key: 'input_cost_per_audio_token',
+      label: t('models.modelDetails.inputAudioCost'),
+      value: info.input_cost_per_audio_token,
+    },
+    {
+      key: 'input_cost_per_token_batches',
+      label: t('models.modelDetails.inputBatchCost'),
+      value: info.input_cost_per_token_batches,
+    },
+    {
+      key: 'output_cost_per_token_batches',
+      label: t('models.modelDetails.outputBatchCost'),
+      value: info.output_cost_per_token_batches,
+    },
+    {
+      key: 'output_cost_per_audio_token',
+      label: t('models.modelDetails.outputAudioCost'),
+      value: info.output_cost_per_audio_token,
+    },
+    {
+      key: 'output_cost_per_reasoning_token',
+      label: t('models.modelDetails.reasoningTokenCost'),
+      value: info.output_cost_per_reasoning_token,
+    },
+    {
+      key: 'output_cost_per_token_above_128k_tokens',
+      label: t('models.modelDetails.outputCostAbove128k'),
+      value: info.output_cost_per_token_above_128k_tokens,
+    },
+    {
+      key: 'output_cost_per_token_above_200k_tokens',
+      label: t('models.modelDetails.outputCostAbove200k'),
+      value: info.output_cost_per_token_above_200k_tokens,
+    },
+    { key: 'output_cost_per_image', label: t('models.modelDetails.imageCost'), value: info.output_cost_per_image },
+    {
+      key: 'search_context_cost_per_query',
+      label: t('models.modelDetails.searchContextCost'),
+      value: info.search_context_cost_per_query,
+    },
+  ]
+
+  return items.filter(item => item.value !== null && item.value !== undefined)
+})
+
+const hasAdvancedPricing = computed<boolean>(() => {
+  return advancedPricingItems.value.length > 0
+})
+
+const hasCapabilities = computed<boolean>(() => {
+  return capabilities.value.length > 0
+})
+
+const hasRateLimits = computed<boolean>(() => {
+  if (!props.model) return false
+  return !!(props.model.model_info?.tpm || props.model.model_info?.rpm)
+})
+
+const hasOtherDetails = computed<boolean>(() => {
+  if (!props.model) return false
+  return props.model.model_info?.output_vector_size || props.model.model_info?.supports_embedding_image_input !== null
+})
+</script>

package/components/Models/NamespaceCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col gap-3 rounded-xl border border-surface-200 p-5 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+  >
+    <div class="flex items-center gap-4">
+      <div
+        class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+      >
+        <Icon
+          :name="props.model.icon"
+          size="1.5em"
+        />
+      </div>
+      <div class="flex-1">
+        <h3 class="font-semibold opacity-80">
+          {{ props.model.model_name }}
+        </h3>
+        <div class="mt-3 flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-bold text-surface-600 dark:text-surface-400">
+              {{ t('models.card.costPer1M') }}:
+            </span>
+            <span class="text-sm font-light text-surface-900 dark:text-surface-100">
+              ${{ inputCostPerToken }}
+              <span class="mx-1 text-surface-500">•</span>
+              ${{ outputCostPerToken }}
+            </span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-bold text-surface-600 dark:text-surface-400">
+              {{ t('models.card.tokens') }}:
+            </span>
+            <span class="text-sm font-light text-surface-900 dark:text-surface-100">
+              {{ formatTokenLimits }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ModelDTO } from '@core/sdk/client'
+
+const props = defineProps<{
+  model: ModelDTO
+}>()
+
+const { t } = useI18n()
+
+const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat().format(num)
+}
+
+const formatTokenLimits = computed<string>(() => {
+  const input = props.model?.model_info?.max_input_tokens
+  const output = props.model?.model_info?.max_output_tokens
+
+  if (input && output) {
+    return `${formatNumber(input)} / ${formatNumber(output)}`
+  }
+  else if (input) {
+    return `${formatNumber(input)} / -`
+  }
+  else if (output) {
+    return `- / ${formatNumber(output)}`
+  }
+  return '- / -'
+})
+
+const inputCostPerToken = computed<string | number>(() => {
+  return props.model?.model_info?.input_cost_per_token?.toFixed(2) ?? '-'
+})
+
+const outputCostPerToken = computed<string | number>(() => {
+  return props.model?.model_info?.output_cost_per_token?.toFixed(2) ?? '-'
+})
+</script>