@swiss-ai-hub/web 0.290.11

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

@@ -0,0 +1,100 @@
+<template>
+  <ProgressBar
+    v-if="threadIsLoading || threadEventsAreLoading || !thread || !threadEvents"
+    mode="indeterminate"
+    style="height: 2px"
+  />
+  <div
+    v-else
+    ref="threadPanelRef"
+    class="relative h-[calc(100vh-50px)] w-1/2 min-w-[800px] overflow-y-auto border-l border-surface-200 p-3 dark:border-surface-700"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2 p-3">
+        <ToggleSwitch
+          v-model="showInactive"
+        />
+        <p class="text-sm opacity-60">
+          Show Unused Nodes
+        </p>
+      </div>
+      <div
+        v-for="(docInfo, docId) in documentMap"
+        :key="docId"
+      >
+        <KnowledgeDocumentWithNodes
+          :db="docInfo.db"
+          :namespace="docInfo.namespace"
+          :document-id="docInfo.id"
+          :input-nodes="docInfo.nodes"
+          :show-inactive="showInactive"
+        />
+      </div>
+    </div>
+    <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="closeSources"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, RetrieverEventReadable, IngestedNode } from '@core/sdk/client'
+
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+
+const showInactive = ref<boolean>(false)
+const threadPanelRef = ref(null)
+const panelBounding = useElementBounding(threadPanelRef)
+const panelLeftPosition = computed(() => panelBounding.left.value)
+
+const { thread, threadIsLoading } = useThread()
+const { threadEvents, threadEventsAreLoading } = useThreadEvents()
+
+const closeSources = () => {
+  router.push(tenantPath('/service/openai'))
+}
+
+const retrieveEvents = computed<ContextualizedAgentEvent[]>(() => {
+  return threadEvents.value?.filter((event: ContextualizedAgentEvent) => {
+    return event.display_id === route.params.display_id && event.event.nodes
+  })
+})
+
+type DocumentInfo = {
+  db: string
+  namespace: string
+  id: string
+  nodes: IngestedNode[]
+}
+
+const extractBucket = (source: string): string => {
+  const match = source.match(/(?:s3:\/\/|^\/)([^/]+)/)
+  return match?.[1] ?? ''
+}
+
+const documentMap = computed<Record<string, DocumentInfo>>(() => {
+  const docs: Record<string, DocumentInfo> = {}
+  retrieveEvents.value?.forEach((event: ContextualizedAgentEvent & { event: RetrieverEventReadable }) => {
+    (event.event.nodes ?? []).forEach((node: IngestedNode) => {
+      if (!(node.document_id in docs)) {
+        docs[node.document_id] = {
+          db: extractBucket(node.source),
+          namespace: node.namespace,
+          id: node.document_id,
+          nodes: [],
+        }
+      }
+      docs[node.document_id].nodes.push(node)
+    })
+  })
+  return docs
+})
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <ProgressBar
+    v-if="threadIsLoading || threadEventsAreLoading || !thread || !threadEvents"
+    mode="indeterminate"
+    style="height: 2px"
+  />
+  <div
+    v-else
+    ref="threadPanelRef"
+    class="relative h-[calc(100vh-50px)] w-1/2 min-w-[800px] overflow-y-auto border-l border-surface-200 p-3 dark:border-surface-700"
+  >
+    <ThreadDetails
+      :key="key"
+      :events="threadEvents"
+      :thread="thread"
+      :display-id="route.params.display_id"
+    />
+    <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="closeThread"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+
+const { thread, threadIsLoading } = useThread()
+const { threadEvents, threadEventsAreLoading } = useThreadEvents()
+
+const threadPanelRef = ref(null)
+const panelBounding = useElementBounding(threadPanelRef)
+const panelLeftPosition = computed(() => panelBounding.left.value)
+
+const key = computed(() => {
+  return route.params.thread_id + route.params.display_id
+})
+
+const closeThread = () => {
+  router.push(tenantPath('/service/openai'))
+}
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="flex flex-row">
+    <div class="h-[calc(100vh-50px)] w-full">
+      <iframe
+        :src="`${runtimeConfig.public.webui.url}/oauth/oidc/login`"
+        width="100%"
+        height="100%"
+        title="Open WebUI"
+        allow="microphone"
+        @load="handleIframeLoad"
+      />
+    </div>
+    <NuxtPage />
+
+    <Dialog
+      v-model:visible="mismatchDetected"
+      :header="t('tenant.mismatch_warning')"
+      modal
+      :closable="false"
+    >
+      <p>{{ t('tenant.mismatch_description', { tenant: backendTenantName }) }}</p>
+      <template #footer>
+        <Button
+          :label="t('tenant.mismatch_switch_action')"
+          icon="pi pi-refresh"
+          @click="onSwitchToBackendTenant"
+        />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+
+const { t } = useI18n()
+const runtimeConfig = useRuntimeConfig()
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+const localePath = useLocalePath()
+const { mismatchDetected, backendTenantId, backendTenantName } = useTenantPolling()
+const { setTenant } = useTenant()
+
+async function onSwitchToBackendTenant() {
+  if (!backendTenantId.value) return
+  await setTenant(backendTenantId.value)
+}
+
+let initialLoadDone = false
+
+const handleIframeLoad = () => {
+  // Skip the initial load when iframe first renders OpenWebUI
+  if (!initialLoadDone) {
+    initialLoadDone = true
+    return
+  }
+
+  // Subsequent loads mean the iframe navigated (e.g. Keycloak logout redirect).
+  // Redirect to home without destroying the parent session — the local JWT
+  // stays valid, so the rest of the app keeps working. When the user navigates
+  // back here, the iframe re-triggers OIDC login against Keycloak.
+  console.log('OpenWebUI iframe navigated away, redirecting to home')
+  router.push(localePath('/'))
+}
+
+const handleMessage = (event: MessageEvent) => {
+  console.log('received post event', event)
+  if (event.origin === runtimeConfig.public.webui.url) {
+    const data = event.data
+
+    if (!['show-traces', 'show-sources', 'show-memories', 'set-context'].includes(data.type)) {
+      console.log('Unknown message type:', data.type)
+      return
+    }
+
+    const thread_id = data.thread_id as string
+    const display_id = data.display_id as string
+
+    if (data.type === 'show-traces' || route.path.endsWith('/tracing')) {
+      router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/tracing`))
+    }
+    if (data.type === 'show-sources' || route.path.endsWith('/sources')) {
+      router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/sources`))
+    }
+    if (data.type === 'show-memories' || route.path.endsWith('/memories')) {
+      router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/memories`))
+    }
+  }
+}
+
+// Set up event listener when component is mounted
+onMounted(() => {
+  window.addEventListener('message', handleMessage)
+})
+
+// Clean up event listener when component is unmounted
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleMessage)
+})
+</script>

package/pages/[tenant]/service/organization-memories/graph.vue

@@ -0,0 +1,97 @@
+<template>
+  <StructuralColumn
+    :title="t('memory.graph.title')"
+    :loading="memoriesAreLoading"
+    class="overflow-hidden"
+  >
+    <div class="flex h-full flex-col gap-2">
+      <div class="flex w-full 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>
+
+      <div class="flex-1">
+        <MemoryGraph
+          :relations="allRelations"
+          :selected-memory-id="selectedMemoryId"
+          :highlighted-relations="isSearchActive ? searchData?.relations : undefined"
+          @select-node="handleSelectNode"
+        />
+      </div>
+    </div>
+  </StructuralColumn>
+
+  <NuxtPage :selected-memory-id="selectedMemoryId" />
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+
+// Create organization memory composables using factory
+const { useMemories, useMemorySearch } = createMemoryComposables({
+  type: 'organization',
+})
+
+const {
+  paginatedMemories,
+  allRelations,
+  memoriesAreLoading,
+} = useMemories()
+
+const {
+  searchData,
+  searchIsLoading,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+} = useMemorySearch()
+
+// Use shared search filter composable
+const {
+  searchInput,
+  isSearchButtonLoading,
+  handleSearch,
+  handleClearSearch,
+} = useMemorySearchFilter({
+  searchData,
+  paginatedMemories,
+  isSearchActive,
+  setSearchQuery,
+  clearSearch,
+  searchIsLoading,
+})
+
+const selectedMemoryId = computed(() => route.params.memory_id as string | undefined)
+
+const handleSelectNode = (nodeId: string) => {
+  const memory = paginatedMemories.value.find(m => m.id === nodeId)
+  if (memory) {
+    router.push(tenantPath(`/service/organization-memories/graph/${memory.id}`))
+  }
+}
+</script>

package/pages/[tenant]/service/organization-memories/list/[memory_id].vue

@@ -0,0 +1,3 @@
+<template>
+  <MemoryDetailPage memory-type="organization" />
+</template>

package/pages/[tenant]/service/organization-memories/list.vue

@@ -0,0 +1,150 @@
+<template>
+  <StructuralColumn
+    :title="t('memory.list.title')"
+    :loading="memoriesAreLoading"
+  >
+    <div class="flex h-full flex-col gap-2">
+      <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"
+          @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'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const tenantPath = useTenantPath()
+const confirm = useConfirm()
+const toast = useToast()
+
+// Create organization memory composables using factory
+const { useMemories, useMemorySearch, useDeleteMemory } = createMemoryComposables({
+  type: 'organization',
+})
+
+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(`/service/organization-memories/list/${memory.id}?q=${searchInput.value ?? ''}`))
+}
+
+const handleDeleteAll = () => {
+  confirm.require({
+    message: t('memory.delete_all.confirm_message'),
+    header: t('memory.delete_all.confirm_header'),
+    icon: 'pi pi-exclamation-triangle',
+    acceptClass: 'p-button-danger',
+    accept: async () => {
+      try {
+        await deleteAllMemories()
+        toast.add({
+          severity: 'success',
+          summary: t('memory.delete_all.success.title'),
+          detail: t('memory.delete_all.success.message'),
+          life: 3000,
+        })
+      }
+      catch (error) {
+        console.error('Failed to delete all memories:', error)
+        toast.add({
+          severity: 'error',
+          summary: t('memory.delete_all.error.title'),
+          detail: t('memory.delete_all.error.message'),
+          life: 5000,
+        })
+      }
+    },
+  })
+}
+</script>

package/pages/[tenant]/service/organization-memories.vue

@@ -0,0 +1,3 @@
+<template>
+  <MemoryPageLayout memory-type="organization" />
+</template>

package/pages/[tenant]/service/processes/[process_class]-[process_id]/[process_walkthrough_id].vue

@@ -0,0 +1,7 @@
+<template>
+  <div>Process Walkthrough</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

package/pages/[tenant]/service/processes/[process_class]-[process_id]/configuration.vue

@@ -0,0 +1,106 @@
+<template>
+  <StructuralColumn
+    :title="t('process.configuration.title')"
+    close-route="/service/processes"
+    :loading="processInstanceIsLoading"
+    size="normal"
+  >
+    <div class="flex flex-col gap-3">
+      <p class="mb-4 text-sm text-surface-500 dark:text-surface-400">
+        {{ t('process.configuration.description') }}
+      </p>
+      <ProcessConfiguration
+        v-if="configForm && configForm.length > 0 && !processInstanceIsLoading"
+        :title="t('process.configuration.runtimeSettings')"
+        :description="processInstance?.process_config.description || ''"
+        :form="configForm"
+        :initial-data="configurationData"
+        @submit="submitConfiguration"
+      />
+      <div
+        v-else-if="processInstanceIsLoading"
+        class="text-center text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('common.loading') }}
+      </div>
+      <div
+        v-else
+        class="text-center text-sm text-surface-500 dark:text-surface-400"
+      >
+        {{ t('process.configuration.noConfiguration') }}
+      </div>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+import type { FullProcessInstanceDtoReadable } from '@core/sdk/client'
+
+type FormElement = FullProcessInstanceDtoReadable['form'][number]
+
+const route = useRoute()
+const { processInstance, processInstanceIsLoading } = useProcessInstance()
+const { updateProcessInstance } = useUpdateProcessInstance()
+const { t } = useI18n()
+const toast = useToast()
+
+const configForm = computed(() => processInstance.value?.form || [])
+
+const initializeGroupData = (
+  formElements: FormElement[],
+  data: Record<string, unknown>,
+): Record<string, unknown> => {
+  const result = { ...data }
+
+  for (const element of formElements) {
+    const elementRecord = element as Record<string, unknown>
+    const formkitType = elementRecord.formkit || elementRecord.$formkit
+
+    if (formkitType === 'group') {
+      const name = elementRecord.name as string
+      const children = elementRecord.children as FormElement[] | undefined
+
+      if (result[name] === null || result[name] === undefined) {
+        result[name] = {}
+      }
+
+      if (children && Array.isArray(children)) {
+        result[name] = initializeGroupData(children, result[name] as Record<string, unknown>)
+      }
+    }
+  }
+
+  return result
+}
+
+const configurationData = computed(() => {
+  const rawData = (processInstance.value?.configuration || {}) as Record<string, unknown>
+  return initializeGroupData(configForm.value, rawData)
+})
+
+const submitConfiguration = async (formData: Record<string, unknown>) => {
+  const processClass = route.params.process_class as string
+  const processId = route.params.process_id as string
+
+  try {
+    await updateProcessInstance({
+      processClass,
+      processId,
+      configuration: formData,
+    })
+    toast.add({
+      severity: 'success',
+      summary: t('process.configuration.saveSuccess'),
+      life: 3000,
+    })
+  }
+  catch (error) {
+    console.error('Failed to save process configuration:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('process.configuration.saveError'),
+      life: 5000,
+    })
+  }
+}
+</script>

package/pages/[tenant]/service/processes/[process_class]-[process_id]/overview.vue

@@ -0,0 +1,67 @@
+<template>
+  <StructuralColumn
+    :title="processInstance?.process_config.name"
+    close-route="/service/processes"
+    :loading="processInstanceIsLoading"
+    size="large"
+  >
+    <div class="flex flex-col gap-12">
+      <span class="mb-4 block text-sm text-surface-500 dark:text-surface-400">
+        {{ processInstance.process_config.description }}
+      </span>
+      <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('process.overview.name') }}
+            </span>
+            <Tag
+              :value="processInstance.process_config.name"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('process.overview.class') }}
+            </span>
+            <Tag
+              :value="processInstance.process_class"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('process.overview.processId') }}
+            </span>
+            <Tag
+              :value="processInstance.process_id"
+              severity="secondary"
+            />
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <span class="font-semibold">
+              {{ t('process.overview.status') }}
+            </span>
+            <Tag
+              :value="processInstance.is_online ? t('process.overview.online') : t('process.overview.offline')"
+              :severity="processInstance.is_online ? 'success' : 'error' "
+            />
+          </div>
+        </div>
+      </Panel>
+    </div>
+  </StructuralColumn>
+</template>
+
+<script setup lang="ts">
+const { processInstance, processInstanceIsLoading } = useProcessInstance()
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.panel :deep(.p-panel-header) {
+  padding: 0 !important;
+}
+</style>