@swiss-ai-hub/web 0.290.11

package/pages/[tenant]/service/knowledge/[db]/[namespace].vue

@@ -0,0 +1,144 @@
+<template>
+  <StructuralColumn
+    :title="t('knowledge.documents.title')"
+    close-route="/service/knowledge"
+    :loading="isLoading"
+  >
+    <div class="mb-4 flex items-center gap-4">
+      <IconField class="flex-1">
+        <InputIcon :class="isFetching ? 'pi pi-spinner pi-spin' : 'pi pi-search'" />
+        <InputText
+          v-model="searchInput"
+          :placeholder="t('knowledge.documents.search.placeholder')"
+          class="w-full"
+        />
+        <InputIcon
+          v-if="searchInput && !isFetching"
+          class="pi pi-times cursor-pointer"
+          @click="searchInput = ''"
+        />
+      </IconField>
+      <Button
+        v-if="!currentDatabase?.auto_sync"
+        icon="pi pi-upload"
+        :label="t('knowledge.documents.upload.title')"
+        @click="openUploadModal"
+      />
+    </div>
+
+    <KnowledgeDocumentList
+      :documents="documents"
+      :sort-field="sortState.field"
+      :sort-order="sortState.order"
+      @selected="toDocument"
+      @sort="handleSort"
+    />
+
+    <div class="mt-4">
+      <Paginator
+        :rows="pageSize"
+        :total-records="pagination.total"
+        :rows-per-page-options="[10, 20, 30, 50]"
+        :first="(currentPage - 1) * pageSize"
+        @page="onPageChange"
+      />
+    </div>
+  </StructuralColumn>
+  <NuxtPage />
+
+  <KnowledgeDocumentUploadModal
+    v-model:visible="uploadModalVisible"
+    :database="route.params.db as string"
+    :namespace="route.params.namespace as string"
+    :database-display-name="databaseDisplayName"
+    :namespace-display-name="namespaceDisplayName"
+    @success="handleUpload"
+  />
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { DocumentDto } from '@core/sdk/client'
+
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const { databases } = useDatabases()
+
+const {
+  documents,
+  isLoading,
+  isFetching,
+  pagination,
+  currentPage,
+  pageSize,
+  searchQuery,
+  sortState,
+  setPage,
+  setPageSize,
+  setSearch,
+  setSort,
+  refetch,
+} = useDocuments()
+
+const uploadModalVisible = ref(false)
+const searchInput = ref(searchQuery.value ?? '')
+
+const debouncedSearch = useDebounceFn((value: string) => {
+  setSearch(value)
+}, 300)
+
+// Sync local input to composable (debounced)
+watch(searchInput, (newValue) => {
+  debouncedSearch(newValue)
+})
+
+// Sync composable state back to local input (e.g., on navigation)
+watch(searchQuery, (newValue) => {
+  if (searchInput.value !== (newValue ?? '')) {
+    searchInput.value = newValue ?? ''
+  }
+})
+
+const currentDatabase = computed(() => {
+  return databases.value?.find(db => db.name === route.params.db)
+})
+
+const currentNamespace = computed(() => {
+  return currentDatabase.value?.namespaces?.find(ns => ns.name === route.params.namespace)
+})
+
+const databaseDisplayName = computed(() => {
+  return currentDatabase.value?.display_name || useChangeCase(route.params.db as string, 'capitalCase').value
+})
+
+const namespaceDisplayName = computed(() => {
+  return currentNamespace.value?.display_name || useChangeCase(route.params.namespace as string, 'capitalCase').value
+})
+
+const toDocument = (document: DocumentDto) => {
+  router.push(tenantPath(`/service/knowledge/${route.params.db}/${route.params.namespace}/${document.id}/overview`))
+}
+
+const onPageChange = (event) => {
+  setPageSize(event.rows)
+  const newPage = Math.floor(event.first / event.rows) + 1
+  setPage(newPage)
+}
+
+const handleSort = (field: string | null, order: 1 | -1) => {
+  setSort(field, order)
+}
+
+const openUploadModal = () => {
+  uploadModalVisible.value = true
+}
+
+const handleUpload = () => {
+  refetch()
+}
+</script>

package/pages/[tenant]/service/knowledge.vue

@@ -0,0 +1,126 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('knowledge.title')"
+      :loading="databasesAreLoading"
+    >
+      <div class="flex flex-col gap-12">
+        <div
+          v-for="database in databases"
+          :key="database.name"
+        >
+          <div class="flex items-center gap-2 pb-2 pl-2">
+            <span class="text-sm font-medium">{{ database.display_name || useChangeCase(database.name, 'capitalCase') }}</span>
+            <i
+              v-if="database.auto_sync"
+              class="pi pi-lock text-surface-400 dark:text-surface-500"
+              :title="t('knowledge.auto_sync.description')"
+            />
+            <i
+              v-else
+              class="pi pi-lock-open text-surface-400 dark:text-surface-500"
+              :title="t('knowledge.manual_management.description')"
+            />
+          </div>
+          <div class="grid grid-cols-2 gap-4 2xl:grid-cols-2">
+            <KnowledgeNamespaceCard
+              v-for="namespace in database.namespaces"
+              :key="namespace.name"
+              :namespace="namespace"
+              :auto-sync="database.auto_sync"
+              @click="toNamespace(database.name, namespace)"
+              @upload="openUploadModal(database, namespace)"
+              @edit="openEditNamespaceModal(namespace)"
+            />
+            <KnowledgeNamespaceEmptyCard
+              v-if="!database.auto_sync"
+              @add="openNewNamespaceModal(database.name)"
+            />
+          </div>
+        </div>
+      </div>
+    </StructuralColumn>
+    <NuxtPage />
+
+    <KnowledgeDocumentUploadModal
+      v-model:visible="uploadModalVisible"
+      :database="selectedDatabaseForUpload"
+      :namespace="selectedNamespaceForUpload"
+      :database-display-name="selectedDatabaseDisplayNameForUpload"
+      :namespace-display-name="selectedNamespaceDisplayNameForUpload"
+      @success="handleUploadSuccess"
+    />
+
+    <KnowledgeNamespaceCreateModal
+      v-model="newNamespaceModalVisible"
+      :databases="databases || []"
+      :initial-database="selectedDatabaseForNewNamespace"
+      @success="handleCreationSuccess"
+    />
+
+    <KnowledgeNamespaceEditModal
+      v-model="editNamespaceModalVisible"
+      :namespace="editingNamespace"
+      @success="handleUpdateSuccess"
+    />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { DatabaseDto, NamespaceDto } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const { databases, databasesAreLoading } = useDatabases()
+
+const uploadModalVisible = ref(false)
+const selectedDatabaseForUpload = ref('')
+const selectedNamespaceForUpload = ref('')
+const selectedDatabaseDisplayNameForUpload = ref('')
+const selectedNamespaceDisplayNameForUpload = ref('')
+
+const newNamespaceModalVisible = ref(false)
+const selectedDatabaseForNewNamespace = ref('')
+
+const editNamespaceModalVisible = ref(false)
+const editingNamespace = ref<NamespaceDto | null>(null)
+
+const toNamespace = (database_name: string, namespace: NamespaceDto) => {
+  router.push(tenantPath(`/service/knowledge/${database_name}/${namespace.name}`))
+}
+
+const openUploadModal = (database: DatabaseDto, namespace: NamespaceDto) => {
+  selectedDatabaseForUpload.value = database.name
+  selectedNamespaceForUpload.value = namespace.name
+  selectedDatabaseDisplayNameForUpload.value = database.display_name || useChangeCase(database.name, 'capitalCase')
+  selectedNamespaceDisplayNameForUpload.value = namespace.display_name || useChangeCase(namespace.name, 'capitalCase')
+  uploadModalVisible.value = true
+}
+
+const handleUploadSuccess = (data: { files: File[], namespace: string, database: string }) => {
+  uploadModalVisible.value = false
+  router.push(tenantPath(`/service/knowledge/${data.database}/${data.namespace}`))
+}
+
+const openNewNamespaceModal = (databaseName: string) => {
+  selectedDatabaseForNewNamespace.value = databaseName
+  newNamespaceModalVisible.value = true
+}
+
+const handleCreationSuccess = (data: { database: string, namespace: string }) => {
+  router.push(tenantPath(`/service/knowledge/${data.database}/${data.namespace}`))
+}
+
+const openEditNamespaceModal = (namespace: NamespaceDto) => {
+  editingNamespace.value = namespace
+  editNamespaceModalVisible.value = true
+}
+
+const handleUpdateSuccess = () => {
+  editingNamespace.value = null
+}
+</script>

package/pages/[tenant]/service/models/[model_name].vue

@@ -0,0 +1,84 @@
+<template>
+  <StructuralColumn
+    :title="t('models.modelDetails.overview')"
+    close-route="/service/models"
+    :loading="modelIsLoading"
+  >
+    <div class="flex flex-col gap-8">
+      <Panel class="panel pt-5">
+        <div class="grid grid-cols-3 gap-6">
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.name') }}
+            </span>
+            <span class="text-lg font-light">
+              {{ model?.model_name || t('models.modelDetails.notSpecified') }}
+            </span>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.mode') }}
+            </span>
+            <span class="text-lg font-light capitalize">
+              {{ model?.model_info?.mode || t('models.modelDetails.notSpecified') }}
+            </span>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.maxInputTokens') }}
+            </span>
+            <span class="text-lg font-light">
+              {{
+                model?.model_info?.max_input_tokens ? formatNumber(model?.model_info?.max_input_tokens) : t('models.modelDetails.notSpecified')
+              }}
+            </span>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.maxOutputTokens') }}
+            </span>
+            <span class="text-lg font-light">
+              {{
+                model?.model_info?.max_output_tokens ? formatNumber(model?.model_info?.max_output_tokens) : t('models.modelDetails.notSpecified')
+              }}
+            </span>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.basicInputCost') }}
+            </span>
+            <span class="text-lg font-light">
+              {{
+                isDefined(model?.model_info?.input_cost_per_token) ? `$${model.model_info.input_cost_per_token.toFixed(2)}` : t('models.modelDetails.notSpecified')
+              }}
+            </span>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('models.modelDetails.basicOutputCost') }}
+            </span>
+            <span class="text-lg font-light">
+              {{
+                isDefined(model?.model_info?.output_cost_per_token) ? `$${model.model_info.output_cost_per_token.toFixed(2)}` : t('models.modelDetails.notSpecified')
+              }}
+            </span>
+          </div>
+        </div>
+      </Panel>
+
+      <ModelDetailsPanel :model="model" />
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import ModelDetailsPanel from '@core/components/Models/ModelDetailsPanel.vue'
+
+const { t } = useI18n()
+
+const { model, modelIsLoading } = useSingleModel()
+
+const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat().format(num)
+}
+</script>

package/pages/[tenant]/service/models.vue

@@ -0,0 +1,61 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('models.title')"
+      :loading="modelsAreLoading"
+    >
+      <div
+        v-if="error"
+        class="mb-4"
+      >
+        <Message
+          severity="error"
+          :closable="false"
+        >
+          {{ t('models.error') }}: {{ error }}
+        </Message>
+      </div>
+
+      <div class="flex flex-col gap-12">
+        <div
+          v-for="modelType in modelTypes"
+          :key="modelType.name"
+        >
+          <div
+            class="pb-2 pl-2 text-sm font-medium"
+          >
+            {{ useChangeCase(modelType.name, 'capitalCase') }}
+          </div>
+          <div
+            class="grid grid-cols-2 gap-4 2xl:grid-cols-2"
+          >
+            <ModelsNamespaceCard
+              v-for="model in modelType.models"
+              :key="model.model_name"
+              :model="model"
+              @click="() => showModelDetails(model)"
+            />
+          </div>
+        </div>
+      </div>
+    </StructuralColumn>
+
+    <NuxtPage />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { ModelDTO } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const { modelTypes, modelsAreLoading, error } = useModelsList()
+
+function showModelDetails(model: ModelDTO) {
+  router.push(tenantPath(`/service/models/${encodeURIComponent(model.model_name)}`))
+}
+</script>

package/pages/[tenant]/service/my-account.vue

@@ -0,0 +1,117 @@
+<template>
+  <StructuralScreen>
+    <StructuralColumn
+      :title="t('my_account.title')"
+      :loading="myUserIsLoading"
+    >
+      <div
+        v-if="myUser"
+        class="flex flex-col gap-12"
+      >
+        <Panel class="panel pt-5">
+          <div class="grid grid-cols-2 gap-4 xl:grid-cols-4">
+            <div class="flex flex-col items-start gap-2">
+              <span class="font-semibold">
+                {{ t('user.list.name') }}
+              </span>
+              <Tag
+                :value="myUser.name"
+                severity="secondary"
+              />
+            </div>
+            <div class="flex flex-col items-start gap-2">
+              <span class="font-semibold">
+                {{ t('user.list.email') }}
+              </span>
+              <Tag
+                :value="myUser.email"
+                severity="secondary"
+              />
+            </div>
+            <div class="flex flex-col items-start gap-2">
+              <span class="font-semibold">
+                {{ t('user.list.last_accessed') }}
+              </span>
+              <Tag
+                v-if="myUser.last_accessed"
+                :value="getTimeAgo(myUser.last_accessed).text"
+                :severity="getTimeAgo(myUser.last_accessed).severity"
+              />
+            </div>
+            <div class="flex flex-col items-start gap-2">
+              <span class="font-semibold">
+                {{ t('user.list.roles') }}
+              </span>
+              <div class="flex flex-wrap gap-2">
+                <Badge
+                  v-for="role in myUser.roles"
+                  :key="role"
+                  :value="role"
+                />
+              </div>
+            </div>
+          </div>
+        </Panel>
+
+        <div class="flex flex-col gap-8">
+          <div class="flex flex-col gap-3">
+            <h3 class="text-2xl">
+              {{ t('my_account.services') }}
+            </h3>
+            <div class="flex flex-wrap gap-2">
+              <Tag
+                v-for="service in myUser.access.services"
+                :key="service.name"
+                v-tooltip.top="service.level === 2 ? 'Admin' : 'User'"
+                :value="service.name"
+                :icon="service.level === 2 ? 'pi pi-crown' : undefined"
+              />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-3">
+            <h3 class="text-2xl">
+              {{ t('my_account.agents') }}
+            </h3>
+            <div class="flex flex-wrap gap-2">
+              <Tag
+                v-for="agent in myUser.access.agents"
+                :key="agent.name"
+                v-tooltip.top="agent.level === 2 ? 'Admin' : 'User'"
+                :value="agent.name"
+                :icon="agent.level === 2 ? 'pi pi-crown' : undefined"
+              />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-3">
+            <h3 class="text-2xl">
+              {{ t('my_account.processes') }}
+            </h3>
+            <div class="flex flex-wrap gap-2">
+              <Tag
+                v-for="process in myUser.access.processes"
+                :key="process.name"
+                v-tooltip.top="process.level === 2 ? 'Admin' : 'User'"
+                :value="process.name"
+                :icon="process.level === 2 ? 'pi pi-crown' : undefined"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </StructuralColumn>
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+const { myUser, myUserIsLoading } = useMyUser()
+const { t } = useI18n()
+const { getTimeAgo } = useTimeAgo()
+</script>
+
+<style scoped>
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>

package/pages/[tenant]/service/openai/[thread_id]/[display_id]/memories.vue

@@ -0,0 +1,66 @@
+<template>
+  <ProgressBar
+    v-if="threadIsLoading || !thread"
+    mode="indeterminate"
+    style="height: 2px"
+  />
+  <div
+    v-else
+    ref="memoriesPanelRef"
+    class="relative h-[calc(100vh-50px)] w-1/2 min-w-[800px] overflow-y-auto border-l border-surface-200 p-6 dark:border-surface-700"
+  >
+    <div class="mb-4">
+      <h2 class="text-2xl font-semibold">
+        {{ t('openwebui.memories.title') }}
+      </h2>
+    </div>
+
+    <!-- Top-level tabs: One per agent -->
+    <TabView v-if="agents.length > 0">
+      <TabPanel
+        v-for="agent in agents"
+        :key="`${agent.agent_class}-${agent.agent_id}`"
+        :header="agent.agent_config.name"
+      >
+        <MemoryOpenWebUIContent
+          :agent-class="agent.agent_class"
+          :agent-id="agent.agent_id"
+        />
+      </TabPanel>
+    </TabView>
+
+    <!-- Close button -->
+    <div
+      class="fixed top-1/2 -translate-y-1/2"
+      :style="{ left: `${panelLeftPosition - 16}px` }"
+    >
+      <i
+        class="pi pi-chevron-right cursor-pointer rounded-full border border-surface-200 bg-surface-0 p-3 hover:bg-surface-100 dark:border-surface-700 dark:bg-surface-900 hover:dark:bg-surface-800"
+        @click="closeMemories"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MinimalAgentDto } from '@core/sdk/client'
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const memoriesPanelRef = ref(null)
+const panelBounding = useElementBounding(memoriesPanelRef)
+const panelLeftPosition = computed(() => panelBounding.left.value)
+
+// Fetch thread to get agents
+const { thread, threadIsLoading } = useThread()
+
+// Get agents from thread
+const agents = computed<MinimalAgentDto[]>(() => thread.value?.agents || [])
+
+// Close and return to OpenWebUI
+const closeMemories = () => {
+  router.push(tenantPath('/service/openai'))
+}
+</script>