@swiss-ai-hub/web 0.321.1 → 0.323.0

package/composables/support/useIncidentContext.ts

@@ -0,0 +1,56 @@
+import { format } from 'date-fns'
+
+interface UserAgentBrand {
+  brand: string
+  version: string
+}
+
+interface UserAgentData {
+  brands?: UserAgentBrand[]
+  platform?: string
+}
+
+// "Chrome 129 · Windows" rather than the 120-character user-agent string: a support engineer
+// reads the short form faster, and the raw string tells them nothing extra. Falls back to the
+// full agent on browsers without the (Chromium-only) hints API.
+const describeBrowser = (): string => {
+  if (!import.meta.client) return ''
+  const data = (navigator as Navigator & { userAgentData?: UserAgentData }).userAgentData
+  const brand = data?.brands?.find(candidate => !/not.?a.?brand/i.test(candidate.brand))
+  if (!brand) return navigator.userAgent
+  return data?.platform ? `${brand.brand} ${brand.version} · ${data.platform}` : `${brand.brand} ${brand.version}`
+}
+
+// The half of the report context only the browser knows. Its counterpart is filled server-side
+// from the caller's token — tenant and reporter identity — because those are the two the
+// reporter must not be able to get wrong by accident.
+//
+// Every key here is a question `id` in packages/core/.../incident/incident_form.yml. That naming
+// is the whole contract: a key with no matching question is silently dropped.
+export const useIncidentContext = () => {
+  const { locale } = useI18n()
+  const runtimeConfig = useRuntimeConfig()
+  const { versionDisplay } = useAppVersion()
+  const { context: openWebUIContext } = useOpenWebUIContext()
+
+  // Deliberately a snapshot rather than a computed: the reported time has to be the moment the
+  // reporter raised the report, and a computed over a non-reactive clock would freeze at whenever
+  // the page last rendered — hours earlier on a tab left open, which is exactly the kind of tab a
+  // bug gets reported from.
+  const buildIncidentContext = (): Record<string, string> => ({
+    // With the offset, because this field exists to find the request in logs that are in UTC
+    // while the reporter and whoever reads it are rarely in the same zone.
+    occurred_at: format(new Date(), 'yyyy-MM-dd HH:mm XXX'),
+    page_url: globalThis.location?.href ?? '',
+    version: versionDisplay.value ?? '',
+    environment: (runtimeConfig.public.env as string) ?? '',
+    agent_class: openWebUIContext.value?.agentClass ?? '',
+    agent_name: openWebUIContext.value?.agentName ?? '',
+    model: openWebUIContext.value?.model ?? '',
+    conversation_id: openWebUIContext.value?.threadId ?? '',
+    browser: describeBrowser(),
+    locale: locale.value,
+  })
+
+  return { buildIncidentContext }
+}

package/composables/support/useIncidentForm.ts

@@ -0,0 +1,45 @@
+import { createIncident, getIncidentForm, type CreatedIncidentDto, type IncidentFormDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+// The form is a file shipped with the platform, so it changes on release, not per request —
+// except for the prefilled values, which is why this is still fetched rather than bundled.
+export const useIncidentForm = defineQuery(() => {
+  const isOpen = useIncidentReport().isOpen
+
+  const {
+    data: incidentForm,
+    isPending: incidentFormIsLoading,
+    error: incidentFormError,
+  } = useQuery<IncidentFormDto>({
+    key: () => ['incident-form'],
+    staleTime: minutesToMilliseconds(5),
+    // Only while the dialog is open: a deployment with no incident repository answers 404 here,
+    // and there is no reason to ask on every page load for a form nobody has opened.
+    enabled: isOpen,
+    query: async () => await getIncidentForm({ composable: '$fetch' }),
+  })
+
+  return { incidentForm, incidentFormIsLoading, incidentFormError }
+})
+
+export const useSubmitIncident = defineMutation(() => {
+  const { mutateAsync: submitIncident, isLoading: incidentIsSubmitting } = useMutation({
+    mutation: async ({
+      submission,
+      attachments,
+    }: {
+      submission: Record<string, unknown>
+      attachments: File[]
+    }): Promise<CreatedIncidentDto> => {
+      // Multipart, so the answers travel as one JSON field beside the files. The API validates
+      // that JSON against the form's own schema; sending the fields individually would make the
+      // endpoint's shape depend on the form definition.
+      return await createIncident({
+        composable: '$fetch',
+        body: { submission: JSON.stringify(submission), attachments },
+      })
+    },
+  })
+
+  return { submitIncident, incidentIsSubmitting }
+})

package/composables/support/useIncidentReport.ts

@@ -0,0 +1,16 @@
+// Opening the report dialog. Shared state rather than a prop, because it is raised from three
+// places — the app rail, the settings popover, and a per-message action inside the chat iframe —
+// while the dialog itself is mounted once by the layout.
+export const useIncidentReport = () => {
+  const isOpen = useState<boolean>('incident-dialog-open', () => false)
+
+  const open = (): void => {
+    isOpen.value = true
+  }
+
+  const close = (): void => {
+    isOpen.value = false
+  }
+
+  return { isOpen, open, close }
+}

package/composables/support/useOpenWebUIContext.ts

@@ -0,0 +1,38 @@
+export interface OpenWebUIContext {
+  threadId: string
+  displayId: string
+  // Split rather than one "model or agent" string: an investigation starts from a different
+  // place depending on which it was, and the acceptance criteria ask for all three.
+  agentClass?: string
+  agentName?: string
+  model?: string
+}
+
+// The chat UI runs inside an iframe (pages/[tenant]/service/openai.vue), so the shell never
+// sees which conversation the user is looking at — the pipe tells it, by posting `set-context`
+// as each message streams. Keeping the last one is what lets a bug report name the exact
+// thread, the one field in the whole report that survives the reporter's own retelling:
+// support can replay that run's events and its trace from it.
+export const useOpenWebUIContext = () => {
+  const context = useState<OpenWebUIContext | null>('openwebui-context', () => null)
+
+  // Replaces, deliberately: the inlet filter sends every field on every turn, and a field it
+  // leaves empty has to clear the previous turn's value rather than survive into a report about
+  // this one.
+  const setOpenWebUIContext = (next: OpenWebUIContext): void => {
+    context.value = next
+  }
+
+  // Merges, for the one producer that knows a single field: the agent pipe learns the thread
+  // after the filter has already described the turn.
+  const updateOpenWebUIContext = (partial: Partial<OpenWebUIContext>): void => {
+    const current = context.value
+    context.value = current ? { ...current, ...partial } : { threadId: '', displayId: '', ...partial }
+  }
+
+  const clearOpenWebUIContext = (): void => {
+    context.value = null
+  }
+
+  return { context, setOpenWebUIContext, updateOpenWebUIContext, clearOpenWebUIContext }
+}

package/composables/tenant/useChatDisclaimer.ts

@@ -0,0 +1,24 @@
+import { getChatDisclaimer } from '@core/sdk/client'
+
+export const useChatDisclaimer = defineQuery(() => {
+  const { tenantId } = useTenant()
+  const { locale, t } = useI18n()
+  const { data } = useQuery({
+    key: () => ['tenant', tenantId.value ?? '', 'chat-disclaimer', locale.value],
+    enabled: useTenantReady(),
+    staleTime: 0,
+    query: () => {
+      const language = locale.value
+      return getChatDisclaimer({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        onRequest: ({ options }) => {
+          options.headers.set('lang', language)
+        },
+      })
+    },
+  })
+
+  const disclaimer = computed(() => data.value ?? t('openwebui.default_disclaimer'))
+  return { disclaimer }
+})

package/composables/user/useApplyLocale.ts

@@ -0,0 +1,23 @@
+import { changeLocale } from '@formkit/vue'
+
+/**
+ * Switches every place the UI language lives, so a restored language and a
+ * manual switch cannot drift apart: FormKit's validation messages, the locale
+ * route prefix, and query data the API already translated.
+ */
+export const useApplyLocale = () => {
+  const queryCache = useQueryCache()
+  const switchLocalePath = useSwitchLocalePath()
+  const router = useRouter()
+
+  const applyLocale = async (code: string) => {
+    changeLocale(code)
+    await router.push(switchLocalePath(code))
+    // Query keys carry no locale, so data the API translated under the old
+    // `lang` header would otherwise stay cached. Invalidate only after the
+    // route change, because the header is read from the live locale.
+    queryCache.invalidateQueries()
+  }
+
+  return { applyLocale }
+}

package/composables/user/useMyLocale.ts

@@ -0,0 +1,20 @@
+import { updateMyLocale } from '@core/sdk/client'
+
+export const useUpdateMyLocale = defineMutation(() => {
+  const { tenantId } = useTenant()
+
+  const { mutateAsync, isLoading } = useMutation({
+    mutation: async ({ locale }: { locale: string }) => {
+      await updateMyLocale({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        body: { locale },
+      })
+    },
+  })
+
+  return {
+    updateMyLocale: mutateAsync,
+    updateMyLocaleIsLoading: isLoading,
+  }
+})

package/composables/user/useRestorePreferredLocale.ts

@@ -0,0 +1,38 @@
+/**
+ * Applies the language persisted against the Keycloak account once per session.
+ *
+ * The `i18n_redirected` cookie alone cannot carry the choice across a logout: a
+ * round trip through Keycloak can land on a different locale prefix, and
+ * @nuxtjs/i18n then rewrites the cookie from that prefix. The server-side value
+ * is the only copy that survives that, a cleared cookie, or a second device.
+ */
+export const useRestorePreferredLocale = () => {
+  const { locale } = useI18n()
+  const { applyLocale } = useApplyLocale()
+  const { myUser } = useMyUser()
+  const { updateMyLocale } = useUpdateMyLocale()
+  // useState, not a plain ref: the layout may remount, and reapplying would
+  // fight a language the user switched to in the meantime.
+  const alreadyApplied = useState('preferred-locale-applied', () => false)
+
+  watch(myUser, (user) => {
+    if (!user || alreadyApplied.value) return
+    alreadyApplied.value = true
+
+    const persisted = user.preferred_locale
+    if (!persisted) {
+      // First login since the feature shipped: adopt whatever the browser chose
+      // so the next logout has something to restore.
+      updateMyLocale({ locale: locale.value }).catch((error) => {
+        console.error('Failed to seed preferred locale', error)
+      })
+      return
+    }
+
+    if (persisted !== locale.value) {
+      // The same full switch as the language selector: without it, FormKit and
+      // queries already fetched under the old `lang` header stay untranslated.
+      applyLocale(persisted)
+    }
+  }, { immediate: true })
+}

package/composables/userFiles/useCreateUserFolder.ts

@@ -0,0 +1,15 @@
+import { createUserFolder } from '@core/sdk/client'
+
+export const useCreateUserFolder = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { tenantId } = useTenant()
+
+  const { mutateAsync: createUserFolderMutation } = useMutation({
+    mutation: async (folderPath: string) => {
+      await createUserFolder({ composable: '$fetch', path: { tenant_id: tenantId.value! }, body: { path: folderPath } })
+    },
+    onSettled: () => queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'user-files'] }),
+  })
+
+  return { createUserFolder: createUserFolderMutation }
+})

package/composables/userFiles/useDeleteUserFile.ts

@@ -0,0 +1,15 @@
+import { deleteUserFile } from '@core/sdk/client'
+
+export const useDeleteUserFile = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { tenantId } = useTenant()
+
+  const { mutateAsync: deleteUserFileMutation } = useMutation({
+    mutation: async (filePath: string) => {
+      await deleteUserFile({ composable: '$fetch', path: { tenant_id: tenantId.value! }, query: { path: filePath } })
+    },
+    onSettled: () => queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'user-files'] }),
+  })
+
+  return { deleteUserFile: deleteUserFileMutation }
+})

package/composables/userFiles/useMoveUserFile.ts

@@ -0,0 +1,15 @@
+import { moveUserFile } from '@core/sdk/client'
+
+export const useMoveUserFile = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { tenantId } = useTenant()
+
+  const { mutateAsync: moveUserFileMutation } = useMutation({
+    mutation: async ({ source, destination }: { source: string, destination: string }) => {
+      await moveUserFile({ composable: '$fetch', path: { tenant_id: tenantId.value! }, body: { source, destination } })
+    },
+    onSettled: () => queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'user-files'] }),
+  })
+
+  return { moveUserFile: moveUserFileMutation }
+})

package/composables/userFiles/useUploadUserFiles.ts

@@ -0,0 +1,19 @@
+import { uploadUserFile } from '@core/sdk/client'
+
+export const useUploadUserFiles = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { tenantId } = useTenant()
+
+  const { mutateAsync: uploadUserFilesMutation, isLoading: isUploading } = useMutation({
+    mutation: async ({ folder, files }: { folder: string, files: File[] }) => {
+      await Promise.all(
+        files.map(file =>
+          uploadUserFile({ composable: '$fetch', path: { tenant_id: tenantId.value! }, query: { folder }, body: { file } }),
+        ),
+      )
+    },
+    onSettled: () => queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'user-files'] }),
+  })
+
+  return { uploadUserFiles: uploadUserFilesMutation, isUploading }
+})

package/composables/userFiles/useUserFileContent.ts

@@ -0,0 +1,24 @@
+import { getUserFileContent } from '@core/sdk/client'
+
+export const useUserFileContent = () => {
+  const { tenantId } = useTenant()
+
+  const fetchBlob = async (filePath: string, download = false): Promise<Blob> =>
+    await getUserFileContent({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value! },
+      query: { path: filePath, download },
+      responseType: 'blob',
+    }) as Blob
+
+  const download = async (filePath: string, name: string) => {
+    const url = URL.createObjectURL(await fetchBlob(filePath, true))
+    const link = document.createElement('a')
+    link.href = url
+    link.download = name
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return { fetchBlob, download }
+}

package/composables/userFiles/useUserFiles.ts

@@ -0,0 +1,25 @@
+import { listUserFiles } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useUserFiles = defineQuery(() => {
+  const { tenantId } = useTenant()
+  const folder = ref('.')
+
+  const filesQuery = useQuery({
+    key: () => ['tenant', tenantId.value, 'user-files', folder.value],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () =>
+      await listUserFiles({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: { folder: folder.value },
+      }),
+  })
+
+  const entries = computed(() => filesQuery.state.value?.data?.entries ?? [])
+  const folderTitle = computed(() => filesQuery.state.value?.data?.folder_title ?? null)
+  const isLoading = computed(() => filesQuery.asyncStatus.value === 'loading')
+
+  return { folder, entries, folderTitle, isLoading, error: filesQuery.error, refresh: filesQuery.refetch }
+})

package/formkit.config.ts

@@ -2,9 +2,11 @@ import AgentSelector from '@core/components/FormKit/AgentSelector.vue'
 import ChipsInput from '@core/components/FormKit/ChipsInput.vue'
 import CronInput from '@core/components/FormKit/CronInput.vue'
 import IconSelector from '@core/components/FormKit/IconSelector.vue'
+import KnowledgeCollectionSelector from '@core/components/FormKit/KnowledgeCollectionSelector.vue'
 import KnowledgeDatabaseSelector from '@core/components/FormKit/KnowledgeDatabaseSelector.vue'
 import LocaleInput from '@core/components/FormKit/LocaleInput.vue'
 import ModelSelect from '@core/components/FormKit/ModelSelect.vue'
+import SecretFileInput from '@core/components/FormKit/SecretFileInput.vue'
 import TenantSelect from '@core/components/FormKit/TenantSelect.vue'
 import VectorStoreInput from '@core/components/FormKit/VectorStoreInput.vue'
 import { en, de, fr, it } from '@formkit/i18n'
@@ -97,7 +99,7 @@ const config: DefaultConfigOptions = {
   inputs: {
     ...primeInputs,
     agentSelector: createInput(AgentSelector, {
-      props: ['startEvent', 'classPlaceholder', 'idPlaceholder', 'filter'],
+      props: ['startEvent', 'agentClass', 'classPlaceholder', 'idPlaceholder', 'filter'],
     }),
     chipsInput: createInput(ChipsInput, {
       props: ['placeholder'],
@@ -105,6 +107,9 @@ const config: DefaultConfigOptions = {
     cronInput: createInput(CronInput, {
       props: ['timezonePlaceholder', 'filter'],
     }),
+    knowledgeCollectionSelector: createInput(KnowledgeCollectionSelector, {
+      props: ['agentRef', 'placeholder', 'filter'],
+    }),
     knowledgeDatabaseSelector: createInput(KnowledgeDatabaseSelector, {
       props: ['placeholder', 'filter'],
     }),
@@ -112,11 +117,14 @@ const config: DefaultConfigOptions = {
       props: ['options', 'placeholder'],
     }),
     localeInput: createInput(LocaleInput, {
-      props: ['inputType', 'rows', 'placeholder'],
+      props: ['inputType', 'rows', 'placeholder', 'allowTranslation'],
     }),
     modelSelect: createInput(ModelSelect, {
       props: ['mode', 'placeholder', 'filter', 'showClear'],
     }),
+    secretFileInput: createInput(SecretFileInput, {
+      props: ['accept', 'maxSizeBytes', 'placeholder'],
+    }),
     tenantSelect: createInput(TenantSelect, {
       props: ['placeholder', 'filter'],
     }),