@swiss-ai-hub/web 0.321.1 → 0.323.0

package/components/Support/IncidentButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- Nothing at all on a deployment without an incident repository: a button that leads to
+       "not configured" is the affordance the ADR says such a deployment must not grow. -->
+  <template v-if="incidentReportingIsAvailable">
+    <Button
+      v-if="props.labelled"
+      class="w-full"
+      :label="t('support.report_bug')"
+      variant="text"
+      icon="pi pi-exclamation-circle"
+      icon-pos="right"
+      @click="open"
+    />
+    <Button
+      v-else
+      v-tooltip="{ value: t('support.report_bug'), showDelay: 0 }"
+      :aria-label="t('support.report_bug')"
+      icon="pi pi-exclamation-circle"
+      variant="text"
+      size="large"
+      @click="open"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  // Icon-only in the app rail, labelled inside the settings popover.
+  labelled?: boolean
+}>(), {
+  labelled: false,
+})
+
+const { t } = useI18n()
+const { open } = useIncidentReport()
+const { incidentReportingIsAvailable } = useIncidentAvailability()
+</script>

package/components/Support/IncidentDialog.vue

@@ -0,0 +1,119 @@
+<template>
+  <Dialog
+    v-model:visible="isOpen"
+    :header="t('support.dialog_title')"
+    modal
+    :style="{ width: '44rem' }"
+    :breakpoints="{ '1199px': '80vw', '767px': '95vw' }"
+  >
+    <div
+      v-if="incidentFormIsLoading"
+      class="flex justify-center py-10"
+    >
+      <ProgressSpinner style="width: 2rem; height: 2rem" />
+    </div>
+
+    <Message
+      v-else-if="incidentFormError"
+      severity="warn"
+      :closable="false"
+    >
+      {{ t('support.unavailable') }}
+    </Message>
+
+    <template v-else-if="incidentForm">
+      <FormKitDynamicConfiguration
+        :form="incidentForm.elements"
+        :initial-data="initialData"
+        :submit-label="incidentIsSubmitting ? t('support.submitting') : t('support.submit')"
+        @submit="onSubmit"
+      >
+        <template #before-submit>
+          <div
+            v-if="incidentForm.attachments"
+            class="flex flex-col gap-2 border-b border-surface-200 pb-4 dark:border-surface-700"
+          >
+            <!-- A heading, not a <label>: it names the whole picker block, and the picker button carries its own
+                 accessible name. -->
+            <p class="font-medium">
+              {{ incidentForm.attachments.label }}
+            </p>
+            <p
+              v-if="incidentForm.attachments.description"
+              class="text-xs font-light text-surface-500 dark:text-surface-400"
+            >
+              {{ incidentForm.attachments.description }}
+            </p>
+            <FileUpload
+              mode="basic"
+              multiple
+              custom-upload
+              :auto="false"
+              :accept="incidentForm.attachments.accept.join(',')"
+              :file-limit="incidentForm.attachments.max_files"
+              :max-file-size="incidentForm.attachments.max_bytes"
+              :choose-label="t('support.choose_files')"
+              @select="onSelect"
+            />
+            <ul
+              v-if="attachments.length"
+              class="flex flex-col gap-1 text-xs text-surface-600 dark:text-surface-300"
+            >
+              <li
+                v-for="file in attachments"
+                :key="file.name"
+                class="flex items-center gap-2"
+              >
+                <i class="pi pi-paperclip" />
+                <span>{{ file.name }}</span>
+                <span class="text-surface-400">{{ Math.ceil(file.size / 1024) }} KB</span>
+              </li>
+            </ul>
+          </div>
+        </template>
+      </FormKitDynamicConfiguration>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const toast = useToast()
+const { isOpen, close } = useIncidentReport()
+const { incidentForm, incidentFormIsLoading, incidentFormError } = useIncidentForm()
+const { submitIncident, incidentIsSubmitting } = useSubmitIncident()
+const { buildIncidentContext } = useIncidentContext()
+
+// Snapshotted when the dialog opens rather than computed: the reported time has to be when the
+// reporter raised this, and DynamicConfiguration seeds its model from `initialData` only once.
+const initialData = ref<Record<string, string>>({})
+const attachments = ref<File[]>([])
+
+watch(isOpen, (opened) => {
+  if (!opened) return
+  initialData.value = buildIncidentContext()
+  attachments.value = []
+})
+
+function onSelect(event: { files: File[] }): void {
+  attachments.value = event.files
+}
+
+async function onSubmit(submission: Record<string, unknown>): Promise<void> {
+  try {
+    const created = await submitIncident({ submission, attachments: attachments.value })
+    toast.add({
+      severity: 'success',
+      summary: t('support.sent'),
+      detail: t('support.sent_detail', { reference: created.reference, number: created.number }),
+      life: 8000,
+    })
+    close()
+  }
+  catch {
+    // Left open on purpose: the dialog still holds everything the reporter typed, so closing it
+    // would make them write the report twice.
+    toast.add({ severity: 'error', summary: t('support.send_failed'), detail: t('support.send_failed_detail') })
+  }
+}
+</script>

package/components/User/Settings.vue

@@ -25,6 +25,7 @@
           class="w-full"
         />
       </div>
+      <SupportIncidentButton labelled />
       <Button
         class="w-full"
         :label="t('user.logout')"
@@ -46,9 +47,8 @@ import { changeLocale } from '@formkit/vue'
 const auth = useAuth()
 const { versionDisplay } = useAppVersion()
 const { t, locale, locales } = useI18n()
-const queryCache = useQueryCache()
-const switchLocalePath = useSwitchLocalePath()
-const router = useRouter()
+const { applyLocale } = useApplyLocale()
+const { updateMyLocale } = useUpdateMyLocale()
 
 const op = ref()
 const toggle = (event: Event) => {
@@ -73,11 +73,12 @@ const selectedLocale = computed({
   set: (newValue) => {
     if (newValue?.code && newValue.code !== locale.value) {
       op.value.hide()
-      changeLocale(newValue.code)
-      router.push(switchLocalePath(newValue.code))
-        .then(() => {
-          queryCache.invalidateQueries()
-        })
+      applyLocale(newValue.code)
+      // Fire-and-forget: the switch itself must not wait on the network, and a
+      // failed write only costs the user the cross-device preference.
+      updateMyLocale({ locale: newValue.code }).catch((error) => {
+        console.error('Failed to persist preferred locale', error)
+      })
     }
   },
 })

package/components/UserFiles/Browser.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <Breadcrumb
+        :model="crumbs"
+        class="!bg-transparent !p-0"
+      >
+        <template #item="{ item }">
+          <button
+            type="button"
+            class="cursor-pointer hover:underline"
+            @click="openFolder(item.folder)"
+          >
+            {{ item.label }}
+          </button>
+        </template>
+      </Breadcrumb>
+      <div class="flex gap-2">
+        <Button
+          :label="t('userFiles.actions.upload')"
+          icon="pi pi-upload"
+          size="small"
+          :loading="isUploading"
+          @click="fileInput?.click()"
+        />
+        <Button
+          :label="t('userFiles.actions.newFolder')"
+          icon="pi pi-folder-plus"
+          size="small"
+          severity="secondary"
+          @click="openNameDialog('folder')"
+        />
+        <Button
+          v-tooltip.bottom="t('userFiles.actions.refresh')"
+          icon="pi pi-refresh"
+          size="small"
+          severity="secondary"
+          text
+          @click="refresh()"
+        />
+        <label
+          :for="fileInputId"
+          class="sr-only"
+        >{{ t('userFiles.actions.upload') }}</label>
+        <input
+          :id="fileInputId"
+          ref="fileInput"
+          type="file"
+          multiple
+          class="hidden"
+          @change="onFilesPicked"
+        >
+      </div>
+    </div>
+
+    <Message
+      v-if="noFileSpace"
+      severity="info"
+      :closable="false"
+    >
+      {{ t('userFiles.empty.noSpace') }}
+    </Message>
+
+    <Message
+      v-else-if="loadFailed"
+      severity="error"
+      :closable="false"
+    >
+      {{ t('userFiles.error.load') }}
+    </Message>
+
+    <div
+      v-else
+      class="flex flex-col gap-4"
+      :class="{ 'xl:flex-row': !stacked }"
+    >
+      <div
+        class="min-w-0 flex-1 rounded-lg border-2 border-dashed p-1 transition-colors"
+        :class="isDragging ? 'border-primary bg-primary-50 dark:bg-primary-950' : 'border-transparent'"
+        @dragover.prevent="isDragging = true"
+        @dragleave.prevent="isDragging = false"
+        @drop.prevent="onFilesDropped"
+      >
+        <DataTable
+          :value="entries"
+          :loading="isLoading"
+          data-key="path"
+          size="small"
+          row-hover
+          :row-class="(entry: FileEntryDto) => entry.path === selected?.path ? '!bg-primary-50 dark:!bg-primary-950' : ''"
+          class="cursor-pointer"
+          @row-click="onRowClick($event.data)"
+        >
+          <template #empty>
+            <p class="py-6 text-center text-sm text-surface-500">
+              {{ t('userFiles.empty.folder') }}
+            </p>
+          </template>
+          <Column :header="t('userFiles.columns.name')">
+            <template #body="{ data }">
+              <button
+                type="button"
+                class="flex max-w-full items-center gap-2 rounded text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary"
+                :aria-label="t(data.kind === 'folder' ? 'userFiles.actions.openFolder' : 'userFiles.actions.preview', { name: data.conversation_title ?? data.name })"
+                @click.stop="onRowClick(data)"
+              >
+                <Icon
+                  :name="data.kind === 'folder' ? 'mage:folder' : 'mage:file'"
+                  class="shrink-0 text-lg text-surface-500"
+                  aria-hidden="true"
+                />
+                <span class="truncate font-medium">{{ data.conversation_title ?? data.name }}</span>
+                <span
+                  v-if="data.conversation_title"
+                  class="truncate text-xs text-surface-400"
+                >{{ t('userFiles.conversation') }}</span>
+              </button>
+            </template>
+          </Column>
+          <Column
+            :header="t('userFiles.columns.size')"
+            class="w-28 whitespace-nowrap text-sm text-surface-500"
+          >
+            <template #body="{ data }">
+              {{ data.size == null ? '' : formatSize(data.size) }}
+            </template>
+          </Column>
+          <Column
+            :header="t('userFiles.columns.modified')"
+            class="w-44 whitespace-nowrap text-sm text-surface-500"
+          >
+            <template #body="{ data }">
+              {{ useDateFormat(new Date(data.modified * 1000), 'DD.MM.YYYY HH:mm').value }}
+            </template>
+          </Column>
+          <Column class="w-40">
+            <template #body="{ data }">
+              <div
+                class="flex justify-end"
+                @click.stop
+                @keydown.stop
+              >
+                <Button
+                  v-if="data.kind === 'file'"
+                  v-tooltip.bottom="t('userFiles.actions.download')"
+                  icon="pi pi-download"
+                  size="small"
+                  text
+                  @click="download(data.path, data.name)"
+                />
+                <Button
+                  v-if="!data.conversation_title"
+                  v-tooltip.bottom="t('userFiles.actions.move')"
+                  icon="pi pi-folder-open"
+                  size="small"
+                  text
+                  @click="openMoveDialog(data)"
+                />
+                <Button
+                  v-if="!data.conversation_title"
+                  v-tooltip.bottom="t('userFiles.actions.rename')"
+                  icon="pi pi-pencil"
+                  size="small"
+                  text
+                  @click="openNameDialog('rename', data)"
+                />
+                <Button
+                  v-tooltip.bottom="t('userFiles.actions.delete')"
+                  icon="pi pi-trash"
+                  size="small"
+                  severity="danger"
+                  text
+                  @click="confirmDelete(data)"
+                />
+              </div>
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+      <div
+        v-if="selected"
+        class="w-full"
+        :class="{ 'xl:w-[45%]': !stacked }"
+      >
+        <UserFilesPreview
+          :entry="selected"
+          @close="selected = null"
+        />
+      </div>
+    </div>
+
+    <UserFilesMoveDialog
+      v-model:visible="moveDialog.visible"
+      :entry="moveDialog.entry"
+      :folder="folder"
+      :folders="entries.filter(entry => entry.kind === 'folder')"
+      :parent-label="crumbs.length > 1 ? crumbs[crumbs.length - 2].label : t('userFiles.title')"
+      @submit="onMoveSubmitted"
+    />
+    <UserFilesNameDialog
+      v-model:visible="nameDialog.visible"
+      :header="nameDialog.mode === 'folder' ? t('userFiles.actions.newFolder') : t('userFiles.actions.rename')"
+      :initial-name="nameDialog.entry?.name"
+      @submit="onNameSubmitted"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FileEntryDto } from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{ initialFolder?: string, stacked?: boolean }>(), {
+  initialFolder: '.',
+  stacked: false,
+})
+const { t } = useI18n()
+const toast = useToast()
+const confirm = useConfirm()
+
+const { folder, entries, folderTitle, isLoading, error, refresh } = useUserFiles()
+watch(() => props.initialFolder, value => (folder.value = value), { immediate: true })
+const { uploadUserFiles, isUploading } = useUploadUserFiles()
+const { createUserFolder } = useCreateUserFolder()
+const { moveUserFile } = useMoveUserFile()
+const { deleteUserFile } = useDeleteUserFile()
+const { download } = useUserFileContent()
+
+const selected = ref<FileEntryDto | null>(null)
+const fileInput = ref<HTMLInputElement | null>(null)
+const fileInputId = useId()
+const isDragging = ref(false)
+const nameDialog = reactive<{ visible: boolean, mode: 'folder' | 'rename', entry?: FileEntryDto }>({
+  visible: false,
+  mode: 'folder',
+})
+const moveDialog = reactive<{ visible: boolean, entry?: FileEntryDto }>({ visible: false })
+const titles = reactive<Record<string, string>>({})
+
+const errorStatus = computed(() => (error.value as { statusCode?: number } | null)?.statusCode)
+const noFileSpace = computed(() => errorStatus.value === 404 && folder.value === '.')
+// A conversation's folder only exists once a file lands in it, so a missing folder below the top is shown empty.
+const loadFailed = computed(() => error.value != null && errorStatus.value !== 404)
+
+watch(entries, (list) => {
+  for (const entry of list) if (entry.conversation_title) titles[entry.path] = entry.conversation_title
+}, { immediate: true })
+watch(folderTitle, (title) => {
+  if (title) titles[folder.value] = title
+}, { immediate: true })
+
+const crumbs = computed(() => {
+  const parts = folder.value === '.' ? [] : folder.value.split('/')
+  return [
+    { label: t('userFiles.title'), folder: '.' },
+    ...parts.map((part, index) => {
+      const path = parts.slice(0, index + 1).join('/')
+      return { label: titles[path] ?? part, folder: path }
+    }),
+  ]
+})
+
+const join = (name: string) => (folder.value === '.' ? name : `${folder.value}/${name}`)
+const parentOf = (path: string) => (path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '.')
+
+const openFolder = (path: string) => {
+  folder.value = path
+  selected.value = null
+}
+
+const onRowClick = (entry: FileEntryDto) => {
+  if (entry.kind === 'folder') openFolder(entry.path)
+  else selected.value = entry
+}
+
+const formatSize = (bytes: number) => {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+const notifyFailure = (summary: string, failure: unknown) => {
+  const detail = (failure as { data?: { detail?: string } })?.data?.detail
+  toast.add({ severity: 'error', summary, detail, life: 5000 })
+}
+
+const uploadFiles = async (files: File[]) => {
+  if (files.length === 0) return
+  try {
+    await uploadUserFiles({ folder: folder.value, files })
+    toast.add({ severity: 'success', summary: t('userFiles.toast.uploaded', { count: files.length }), life: 3000 })
+  }
+  catch (error_) {
+    notifyFailure(t('userFiles.toast.uploadFailed'), error_)
+  }
+}
+
+const onFilesPicked = async (event: Event) => {
+  const input = event.target as HTMLInputElement
+  await uploadFiles([...(input.files ?? [])])
+  input.value = ''
+}
+
+const onFilesDropped = async (event: DragEvent) => {
+  isDragging.value = false
+  await uploadFiles([...(event.dataTransfer?.files ?? [])])
+}
+
+const openNameDialog = (mode: 'folder' | 'rename', entry?: FileEntryDto) => {
+  Object.assign(nameDialog, { visible: true, mode, entry })
+}
+
+const onNameSubmitted = async (name: string) => {
+  try {
+    if (nameDialog.mode === 'folder') {
+      await createUserFolder(join(name))
+    }
+    else if (nameDialog.entry) {
+      const parent = parentOf(nameDialog.entry.path)
+      await moveUserFile({ source: nameDialog.entry.path, destination: parent === '.' ? name : `${parent}/${name}` })
+      if (selected.value?.path === nameDialog.entry.path) selected.value = null
+    }
+  }
+  catch (error_) {
+    notifyFailure(t('userFiles.toast.changeFailed'), error_)
+  }
+}
+
+const openMoveDialog = (entry: FileEntryDto) => {
+  Object.assign(moveDialog, { visible: true, entry })
+}
+
+const onMoveSubmitted = async (targetFolder: string) => {
+  const entry = moveDialog.entry
+  if (!entry) return
+  try {
+    await moveUserFile({ source: entry.path, destination: targetFolder === '.' ? entry.name : `${targetFolder}/${entry.name}` })
+    if (selected.value?.path === entry.path) selected.value = null
+  }
+  catch (error_) {
+    notifyFailure(t('userFiles.toast.changeFailed'), error_)
+  }
+}
+
+const confirmDelete = (entry: FileEntryDto) => {
+  confirm.require({
+    header: t('userFiles.delete.header'),
+    message: t(entry.kind === 'folder' ? 'userFiles.delete.folder' : 'userFiles.delete.file', { name: entry.conversation_title ?? entry.name }),
+    icon: 'pi pi-exclamation-triangle',
+    acceptClass: 'p-button-danger',
+    accept: async () => {
+      try {
+        await deleteUserFile(entry.path)
+        if (selected.value?.path === entry.path) selected.value = null
+      }
+      catch (error_) {
+        notifyFailure(t('userFiles.toast.changeFailed'), error_)
+      }
+    },
+  })
+}
+</script>

package/components/UserFiles/MoveDialog.vue

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    :header="t('userFiles.move.header', { name: entry?.name ?? '' })"
+    class="w-[28rem]"
+    @update:visible="emit('update:visible', $event)"
+  >
+    <div class="flex flex-col gap-3">
+      <Listbox
+        v-model="target"
+        :options="targets"
+        option-label="label"
+        option-value="folder"
+        class="w-full"
+        :empty-message="t('userFiles.move.noTargets')"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <Icon
+              :name="option.up ? 'mage:arrow-up' : 'mage:folder'"
+              class="text-surface-500"
+            />
+            <span>{{ option.label }}</span>
+          </div>
+        </template>
+      </Listbox>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('userFiles.actions.cancel')"
+          severity="secondary"
+          text
+          @click="emit('update:visible', false)"
+        />
+        <Button
+          :label="t('userFiles.actions.move')"
+          :disabled="target == null"
+          @click="submit"
+        />
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { FileEntryDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  visible: boolean
+  entry?: FileEntryDto
+  folder: string
+  folders: FileEntryDto[]
+  parentLabel: string
+}>()
+const emit = defineEmits<{ 'update:visible': [boolean], 'submit': [string] }>()
+const { t } = useI18n()
+
+const target = ref<string | null>(null)
+watch(() => props.visible, (visible) => {
+  if (visible) target.value = null
+})
+
+const parentOf = (path: string) => (path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '.')
+
+const targets = computed(() => [
+  ...(props.folder === '.' ? [] : [{ label: props.parentLabel, folder: parentOf(props.folder), up: true }]),
+  ...props.folders
+    .filter(folder => folder.path !== props.entry?.path)
+    .map(folder => ({ label: folder.conversation_title ?? folder.name, folder: folder.path, up: false })),
+])
+
+const submit = () => {
+  if (target.value == null) return
+  emit('submit', target.value)
+  emit('update:visible', false)
+}
+</script>

package/components/UserFiles/NameDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    :header="header"
+    class="w-[28rem]"
+    @update:visible="emit('update:visible', $event)"
+  >
+    <form
+      class="flex flex-col gap-3"
+      @submit.prevent="submit"
+    >
+      <InputText
+        v-model="name"
+        autofocus
+        :invalid="!isValid && name.length > 0"
+      />
+      <small
+        v-if="!isValid && name.length > 0"
+        class="text-red-500"
+      >{{ t('userFiles.name.invalid') }}</small>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="t('userFiles.actions.cancel')"
+          severity="secondary"
+          text
+          @click="emit('update:visible', false)"
+        />
+        <Button
+          type="submit"
+          :label="t('userFiles.actions.save')"
+          :disabled="!isValid"
+        />
+      </div>
+    </form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ visible: boolean, header: string, initialName?: string }>()
+const emit = defineEmits<{ 'update:visible': [boolean], 'submit': [string] }>()
+const { t } = useI18n()
+
+const name = ref('')
+watch(() => props.visible, (visible) => {
+  if (visible) name.value = props.initialName ?? ''
+})
+
+const isValid = computed(() => {
+  const trimmed = name.value.trim()
+  return trimmed.length > 0 && trimmed !== '.' && trimmed !== '..' && !trimmed.includes('/')
+})
+
+const submit = () => {
+  if (!isValid.value) return
+  emit('submit', name.value.trim())
+  emit('update:visible', false)
+}
+</script>