@swiss-ai-hub/web 0.321.0 → 0.323.0

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

@@ -13,9 +13,9 @@
           <div class="flex items-center gap-2 pb-2 pl-2">
             <span class="text-sm font-medium">{{ database.display_name || capitalCase(database.name) }}</span>
             <i
-              v-if="database.auto_sync"
-              class="pi pi-lock text-surface-400 dark:text-surface-500"
-              :title="t('knowledge.auto_sync.description')"
+              v-if="database.source"
+              class="pi pi-sync text-surface-400 dark:text-surface-500"
+              :title="t('knowledge.source.description', { name: capitalCase(database.source) })"
             />
             <i
               v-else
@@ -25,6 +25,16 @@
             <span class="text-xs text-surface-500 dark:text-surface-400">
               {{ t('knowledge.pipeline', { name: capitalCase(database.ingestor) }) }}
             </span>
+            <Button
+              v-if="database.deletable"
+              v-tooltip.top="t('knowledge.source.edit')"
+              icon="pi pi-cloud-download"
+              rounded
+              text
+              size="small"
+              severity="secondary"
+              @click="openSourceModal(database)"
+            />
             <Button
               v-if="database.deletable"
               v-tooltip.top="t('knowledge.delete_database')"
@@ -41,14 +51,14 @@
               v-for="namespace in database.namespaces"
               :key="namespace.name"
               :namespace="namespace"
-              :auto-sync="database.auto_sync"
+              :sourced="!!database.source"
               @click="toNamespace(database.name, namespace)"
               @upload="openUploadModal(database, namespace)"
-              @edit="openEditNamespaceModal(namespace)"
+              @edit="openEditNamespaceModal(database, namespace)"
               @delete="openDeleteNamespaceModal(database, namespace)"
             />
             <KnowledgeNamespaceEmptyCard
-              v-if="!database.auto_sync"
+              v-if="!database.source"
               @add="openNewNamespaceModal(database.name)"
             />
           </div>
@@ -75,6 +85,7 @@
 
     <KnowledgeNamespaceEditModal
       v-model="editNamespaceModalVisible"
+      :database="editingDatabase"
       :namespace="editingNamespace"
       @success="handleUpdateSuccess"
     />
@@ -84,6 +95,11 @@
       @success="handleDatabaseCreationSuccess"
     />
 
+    <KnowledgeDatabaseSourceModal
+      v-model="sourceModalVisible"
+      :database="selectedDatabaseForSource"
+    />
+
     <KnowledgeDeleteConfirmModal
       v-model:visible="deleteModalVisible"
       :title="deleteTitle"
@@ -122,10 +138,19 @@ const newNamespaceModalVisible = ref(false)
 const selectedDatabaseForNewNamespace = ref('')
 
 const editNamespaceModalVisible = ref(false)
+const editingDatabase = ref('')
 const editingNamespace = ref<NamespaceDto | null>(null)
 
 const newDatabaseModalVisible = ref(false)
 
+const sourceModalVisible = ref(false)
+const selectedDatabaseForSource = ref<DatabaseDto | null>(null)
+
+const openSourceModal = (database: DatabaseDto) => {
+  selectedDatabaseForSource.value = database
+  sourceModalVisible.value = true
+}
+
 const toNamespace = (database_name: string, namespace: NamespaceDto) => {
   router.push(tenantPath(`/service/knowledge/${database_name}/${namespace.name}`))
 }
@@ -152,7 +177,8 @@ const handleCreationSuccess = (data: { database: string, namespace: string }) =>
   router.push(tenantPath(`/service/knowledge/${data.database}/${data.namespace}`))
 }
 
-const openEditNamespaceModal = (namespace: NamespaceDto) => {
+const openEditNamespaceModal = (database: DatabaseDto, namespace: NamespaceDto) => {
+  editingDatabase.value = database.name
   editingNamespace.value = namespace
   editNamespaceModalVisible.value = true
 }

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

@@ -0,0 +1,51 @@
+<template>
+  <div
+    ref="filesPanelRef"
+    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('userFiles.title') }}
+      </h2>
+    </div>
+
+    <UserFilesBrowser
+      :initial-folder="`conversations/${threadId}`"
+      stacked
+    />
+
+    <div
+      class="fixed top-1/2 -translate-y-1/2"
+      :style="{ left: `${panelLeftPosition - 16}px` }"
+    >
+      <button
+        v-tooltip.left="t('userFiles.actions.close')"
+        type="button"
+        :aria-label="t('userFiles.actions.close')"
+        class="flex cursor-pointer rounded-full border border-surface-200 bg-surface-0 p-3 hover:bg-surface-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary dark:border-surface-700 dark:bg-surface-900 hover:dark:bg-surface-800"
+        @click="closeFiles"
+      >
+        <i
+          class="pi pi-chevron-right"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const tenantPath = useTenantPath()
+const { t } = useI18n()
+
+const threadId = computed(() => route.params.thread_id as string)
+const filesPanelRef = ref(null)
+const panelBounding = useElementBounding(filesPanelRef)
+const panelLeftPosition = computed(() => panelBounding.left.value)
+
+const closeFiles = () => {
+  router.push(tenantPath('/service/openai'))
+}
+</script>

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

@@ -2,6 +2,7 @@
   <div class="flex flex-row">
     <div class="h-[calc(100vh-50px)] w-full">
       <iframe
+        ref="chatIframe"
         :src="`${runtimeConfig.public.webui.url}/oauth/oidc/login`"
         width="100%"
         height="100%"
@@ -42,6 +43,15 @@ const tenantPath = useTenantPath()
 const localePath = useLocalePath()
 const { mismatchDetected, backendTenantId, backendTenantName } = useTenantPolling()
 const { setTenant, tenantId } = useTenant()
+const { setOpenWebUIContext, updateOpenWebUIContext, clearOpenWebUIContext } = useOpenWebUIContext()
+const chatIframe = ref<HTMLIFrameElement | null>(null)
+const { disclaimer } = useChatDisclaimer()
+const visibleDisclaimer = computed(() => {
+  if (backendTenantId.value && backendTenantId.value !== tenantId.value) return ''
+  // Use generic text until OpenWebUI's active tenant has been confirmed.
+  return backendTenantId.value === tenantId.value ? disclaimer.value : t('openwebui.default_disclaimer')
+})
+const { sendDisclaimer } = useOpenWebuiDisclaimer(chatIframe, visibleDisclaimer)
 
 async function onSwitchToBackendTenant() {
   if (!backendTenantId.value) return
@@ -51,6 +61,7 @@ async function onSwitchToBackendTenant() {
 let initialLoadDone = false
 
 const handleIframeLoad = () => {
+  sendDisclaimer()
   // Skip the initial load when iframe first renders OpenWebUI
   if (!initialLoadDone) {
     initialLoadDone = true
@@ -69,21 +80,42 @@ const VIEW_BY_ACTION: Record<string, string> = {
   'show-traces': 'tracing',
   'show-sources': 'sources',
   'show-memories': 'memories',
+  'show-files': 'files',
 }
 
+const HANDLED_MESSAGE_TYPES = new Set([...Object.keys(VIEW_BY_ACTION), 'set-model-context', 'set-context'])
+
 const openPanelView = (): string | null => {
   if (route.path.endsWith('/tracing')) return 'tracing'
   if (route.path.endsWith('/sources')) return 'sources'
   if (route.path.endsWith('/memories')) return 'memories'
+  if (route.path.endsWith('/files')) return 'files'
   return null
 }
 
+// The action inside the iframe knows only the display, so the owning thread — the correct
+// per-agent, salted one the pipe persisted events under — comes from the backend. Empty when no
+// AI-Hub thread owns the display, which a plain-LLM message never does.
+const resolveThreadId = async (displayId: string): Promise<string> => {
+  try {
+    const { thread_id } = await resolveThreadForDisplay({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value!, display_id: displayId },
+    })
+    return thread_id
+  }
+  catch (error) {
+    console.warn('No AI-Hub thread found for display', displayId, error)
+    return ''
+  }
+}
+
 const handleMessage = async (event: MessageEvent) => {
   console.log('received post event', event)
   if (event.origin !== runtimeConfig.public.webui.url) return
 
   const data = event.data
-  if (!['show-traces', 'show-sources', 'show-memories', 'set-context'].includes(data.type)) {
+  if (!HANDLED_MESSAGE_TYPES.has(data.type)) {
     console.log('Unknown message type:', data.type)
     return
   }
@@ -91,31 +123,41 @@ const handleMessage = async (event: MessageEvent) => {
   const display_id = data.display_id as string
   if (!display_id) return
 
-  // Explicit action-button click: the action knows only the display, so resolve its owning thread from the backend
-  // (the correct per-agent, salted thread the pipe persisted events under).
+  // Explicit action-button click: open the requested side panel on the owning thread.
   const requestedView = VIEW_BY_ACTION[data.type]
   if (requestedView) {
-    try {
-      const { thread_id } = await resolveThreadForDisplay({
-        composable: '$fetch',
-        path: { tenant_id: tenantId.value!, display_id },
-      })
+    const thread_id = await resolveThreadId(display_id)
+    // Leave the panel as-is rather than erroring when nothing owns the display.
+    if (thread_id) {
       router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/${requestedView}`))
     }
-    catch (error) {
-      // No AI-Hub thread owns this display (e.g. a plain-LLM message) — leave the panel as-is instead of erroring.
-      console.warn('No AI-Hub thread found for display', display_id, error)
-    }
     return
   }
 
-  // set-context: the pipe pushes the correct thread_id as each message streams; keep an already-open panel synced.
+  // set-model-context: the inlet filter, which runs on every turn whatever routes it — including
+  // a plain model, which reaches the API through OpenWebUI's own connection and no pipe at all.
+  // It describes the turn from scratch, thread included, because a value it does not set is a
+  // value the previous turn would otherwise lend to a report about this one.
+  if (data.type === 'set-model-context') {
+    setOpenWebUIContext({
+      threadId: '',
+      displayId: display_id,
+      agentClass: (data.agent_class as string) ?? '',
+      agentName: (data.agent_name as string) ?? '',
+      model: (data.model as string) ?? '',
+    })
+    return
+  }
+
+  // set-context: the agent pipe, which alone knows the thread its events are persisted under.
+  const thread_id = (data.thread_id as string) ?? ''
+  updateOpenWebUIContext({ threadId: thread_id, displayId: display_id })
+
+  // Keep an already-open panel synced. Only a resolved thread has a panel to sync to.
+  if (!thread_id) return
   const view = openPanelView()
   if (view) {
-    const thread_id = data.thread_id as string
-    if (thread_id) {
-      router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/${view}`))
-    }
+    router.push(tenantPath(`/service/openai/${thread_id}/${display_id}/${view}`))
   }
 }
 
@@ -127,5 +169,7 @@ onMounted(() => {
 // Clean up event listener when component is unmounted
 onBeforeUnmount(() => {
   window.removeEventListener('message', handleMessage)
+  // The conversation is no longer on screen, so a report raised elsewhere must not claim it.
+  clearOpenWebUIContext()
 })
 </script>

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

@@ -0,0 +1,19 @@
+<template>
+  <StructuralScreen>
+    <template #top>
+      <div class="flex flex-col gap-1">
+        <h1 class="text-2xl font-semibold">
+          {{ t('userFiles.title') }}
+        </h1>
+        <p class="text-sm text-surface-500">
+          {{ t('userFiles.description') }}
+        </p>
+      </div>
+    </template>
+    <UserFilesBrowser />
+  </StructuralScreen>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

package/plugins/api-client.client.ts

@@ -1,4 +1,5 @@
 import { client } from '@core/sdk/client/client.gen'
+import { createHtmlResponseGuard } from '@core/utils/apiResponseGuard'
 
 // Configures the @swiss-ai-hub/web SDK client (`@core/sdk/client`) that every
 // composable shipped in this layer uses.
@@ -31,6 +32,10 @@ export default defineNuxtPlugin((nuxtApp) => {
       const locale = (nuxtApp.$i18n as { locale?: { value?: string } } | undefined)?.locale?.value
       if (locale) options.headers.set('lang', locale)
     },
+    // Both app.vue files re-run setConfig and mergeConfigs is a shallow spread,
+    // but neither sets `onResponse` — so this hook survives in @swiss-ai-hub/web
+    // and in every extender.
+    onResponse: createHtmlResponseGuard(nuxtApp),
     onResponseError: ({ response }) => {
       console.error('AI-Hub API error', response.status, response._data?.detail)
     },

package/plugins/oidc-client.ts

@@ -7,6 +7,14 @@ export default defineNuxtPlugin(async ({ $i18n, $router }) => {
 
   // Keycloak-compatible OIDC configuration
   // Authority URL is the Keycloak realm URL (e.g., http://localhost:8180/realms/aihub)
+  //
+  // The locale in the three redirect URIs below is frozen at bootstrap: this
+  // plugin never re-runs when the user switches language (that is a client-side
+  // route push). They are bootstrap defaults only -- composables/auth/useAuth.ts
+  // overrides redirect_uri and post_logout_redirect_uri per call with the locale
+  // that is live at that moment. silent_redirect_uri keeps the bootstrap value
+  // because automaticSilentRenew reads it from here, and /auth/renew renders
+  // nothing the user sees.
   const auth = new UserManager({
     authority: config.public.oidc.authorityUrl,
     client_id: config.public.oidc.clientId,
@@ -33,13 +41,12 @@ export default defineNuxtPlugin(async ({ $i18n, $router }) => {
     console.log('Access token expiring, attempting silent renewal')
   })
 
-  auth.events.addAccessTokenExpired(() => {
-    console.log('Access token expired')
-    // Redirect to login when token expires and cannot be renewed
-    const locale = $i18n.locale.value
-    $router.push(`/${locale}/auth/login`)
-  })
-
+  // No addAccessTokenExpired handler on purpose. For a stored user that is
+  // already expired it fires ~1s after load, while middleware/auth.global.ts is
+  // still refreshing that same session; a redirect from here races that initial
+  // navigation (login bounce, or a fatal 500 via home-redirect). A session that
+  // really cannot be renewed ends up in addSilentRenewError below or in the
+  // middleware's own refresh.
   auth.events.addSilentRenewError(async (error) => {
     console.error('Silent renew error:', error)
     // Refresh token rejected (e.g. Keycloak invalidated it): drop the dead