@swiss-ai-hub/web 0.290.11

package/components/Role/AccessRulesEditor.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="flex flex-col gap-2 rounded-lg border border-surface-200 p-4 dark:border-surface-700">
+    <span class="flex items-center gap-1 font-semibold">
+      {{ t('role.access_rules') }}
+      <i
+        class="pi pi-question-circle text-surface-400"
+        @mouseenter="(e: Event) => accessRulesHelp?.show(e)"
+        @mouseleave="() => accessRulesHelp?.hide()"
+      />
+      <Popover ref="accessRulesHelp">
+        <div class="text-sm font-normal">
+          <p class="mb-2">
+            {{ t('role.access_rules_help_intro') }}
+          </p>
+          <ul class="flex flex-col gap-1">
+            <li class="whitespace-nowrap"><Badge
+              value="aihub.user.agent.>"
+              severity="secondary"
+              size="small"
+            /> — {{ t('role.access_rules_help_all_agents') }}</li>
+            <li class="whitespace-nowrap"><Badge
+              value="aihub.user.agent.MyAgent.*"
+              severity="secondary"
+              size="small"
+            /> — {{ t('role.access_rules_help_agent_instances') }}</li>
+            <li class="whitespace-nowrap"><Badge
+              value="aihub.user.service.knowledge"
+              severity="secondary"
+              size="small"
+            /> — {{ t('role.access_rules_help_service') }}</li>
+            <li class="whitespace-nowrap"><Badge
+              value="aihub.admin.>"
+              severity="secondary"
+              size="small"
+            /> — {{ t('role.access_rules_help_admin') }}</li>
+          </ul>
+        </div>
+      </Popover>
+    </span>
+    <DataTable
+      v-if="rules.length"
+      :value="tableRows"
+      data-key="id"
+      size="small"
+    >
+      <Column field="accessRule">
+        <template #body="{ data }">
+          <Badge
+            :value="data.accessRule"
+            severity="secondary"
+            class="border border-gray-400/30"
+          />
+        </template>
+      </Column>
+      <Column class="w-24 !text-end">
+        <template #body="{ data }">
+          <Tag
+            v-if="isNew(data.accessRule)"
+            :value="t('role.is_new')"
+            severity="success"
+          />
+        </template>
+      </Column>
+      <Column class="w-12">
+        <template #body="{ data }">
+          <Button
+            icon="pi pi-times"
+            severity="secondary"
+            variant="text"
+            rounded
+            size="small"
+            @click="remove(data.accessRule)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+    <span
+      v-else
+      class="text-sm italic text-muted-color"
+    >
+      {{ t('role.no_access_rules') }}
+    </span>
+    <div class="flex items-center gap-2">
+      <InputText
+        v-model="newRule"
+        :placeholder="t('role.add_access_role')"
+        size="small"
+        class="flex-1"
+        @keyup.enter="add"
+      />
+      <Button
+        type="button"
+        icon="pi pi-plus"
+        :label="t('role.add_button')"
+        size="small"
+        :disabled="!newRule"
+        @click="add"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const accessRulesHelp = ref()
+const rules = defineModel<string[]>('rules', { required: true })
+
+const props = defineProps<{
+  initialRules: string[]
+}>()
+
+const tableRows = computed(() =>
+  rules.value.map(accessRule => ({ accessRule, id: accessRule })),
+)
+
+const newRule = ref('')
+
+const isNew = (rule: string) => !props.initialRules.includes(rule)
+
+const add = () => {
+  if (!newRule.value) return
+  rules.value.push(newRule.value)
+  newRule.value = ''
+}
+
+const remove = (rule: string) => {
+  rules.value = rules.value.filter(r => r !== rule)
+}
+</script>

package/components/Role/Card.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col gap-3 rounded-xl border border-surface-200 p-4 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+    :class="{ 'bg-surface-100 dark:bg-surface-800': isActive }"
+  >
+    <div class="flex items-start gap-3">
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <div
+            class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+          >
+            <Icon
+              name="mage:book"
+              size="1.5em"
+            />
+          </div>
+          <h3 class="font-semibold opacity-80">
+            {{ role.name }}
+          </h3>
+        </div>
+        <span
+          v-if="role.description"
+          class="text-xs"
+        >
+          {{ role.description }}
+        </span>
+        <div class="flex flex-wrap gap-2 text-sm">
+          <Badge
+            v-for="access_rule in role.access_rules"
+            :key="access_rule"
+            :value="access_rule"
+            severity="secondary"
+            class="border border-surface-200 dark:border-surface-700"
+          />
+        </div>
+      </div>
+      <Button
+        icon="pi pi-trash"
+        severity="contrast"
+        variant="text"
+        rounded
+        :aria-label="t('common.actions.delete')"
+        @click.stop="emit('delete', props.role)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { RoleResponse } from '@core/sdk/client'
+
+const props = defineProps<{
+  role: RoleResponse
+}>()
+
+const emit = defineEmits<{
+  delete: [role: RoleResponse]
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+
+const isActive = computed(() => {
+  return route.params.role_id === props.role.id
+})
+</script>

package/components/Role/Create.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <span class="mb-8 block text-surface-500 dark:text-surface-400">
+      {{ t('role.create_dialog.description') }}
+    </span>
+    <div class="mb-4 flex flex-col gap-4">
+      <RoleEdit
+        v-model="role"
+      />
+      <div class="flex justify-end gap-2">
+        <Button
+          type="button"
+          :label="t('role.create_dialog.cancel')"
+          severity="secondary"
+          @click="close"
+        />
+        <Button
+          type="button"
+          :label="t('role.create_dialog.save')"
+          :disabled="!role.name || !role.description || !role.access_rules?.length"
+          @click="save"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { CreateRoleRequest } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const role = ref<CreateRoleRequest>({
+  name: '',
+  description: '',
+  access_rules: [],
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { tenantId } = useTenant()
+const { createRole } = useCreateRole()
+
+const close = () => {
+  emit('close')
+}
+const save = async () => {
+  await createRole({ createdRole: role.value, tenantId: tenantId.value! })
+  emit('close')
+}
+</script>

package/components/Role/Edit.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <FloatLabel variant="in">
+        <InputText
+          id="in_label_name"
+          v-model="role.name"
+          rows="5"
+          cols="30"
+          class="w-full"
+        />
+        <label for="in_label_name">
+          {{ t('role.name') }}
+        </label>
+      </FloatLabel>
+      <FloatLabel variant="in">
+        <Textarea
+          id="in_label_description"
+          v-model="role.description"
+          rows="3"
+          cols="30"
+          class="w-full"
+        />
+        <label for="in_label_description">
+          {{ t('role.description') }}
+        </label>
+      </FloatLabel>
+    </div>
+
+    <AccessRulesEditor
+      v-model:rules="accessRules"
+      :initial-rules="initialAccessRules"
+    />
+
+    <UsageLimitsEditor v-model:limits="usageLimits" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import AccessRulesEditor from './AccessRulesEditor.vue'
+import UsageLimitsEditor from './UsageLimitsEditor.vue'
+
+import type { CreateRoleRequest, RoleResponse } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: RoleResponse | CreateRoleRequest
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [RoleResponse | CreateRoleRequest]
+}>()
+
+const initialAccessRules = ref<string[]>([...(props.modelValue.access_rules ?? [])])
+const role = ref<RoleResponse | CreateRoleRequest>(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  role.value = newValue
+}, { deep: true })
+
+const accessRules = computed({
+  get: () => role.value.access_rules ?? [],
+  set: (val) => { role.value.access_rules = val },
+})
+
+const usageLimits = computed({
+  get: () => role.value.usage_limits ?? [],
+  set: (val) => { role.value.usage_limits = val },
+})
+
+watch(() => [
+  role.value.name,
+  role.value.description,
+  JSON.stringify(role.value.access_rules),
+  JSON.stringify(role.value.usage_limits),
+], () => {
+  emit('update:modelValue', role.value)
+})
+</script>

package/components/Role/UsageLimitsEditor.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="flex flex-col gap-3 rounded-lg border border-surface-200 p-4 dark:border-surface-700">
+    <div class="flex items-center justify-between">
+      <span class="font-semibold">{{ t('role.usage_limits') }}</span>
+      <div class="flex items-center gap-2">
+        <label
+          for="unlimited"
+          class="text-sm"
+        >{{ t('role.unlimited') }}</label>
+        <ToggleSwitch
+          v-model="isUnlimited"
+          input-id="unlimited"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="!isUnlimited"
+      class="flex flex-col gap-3"
+    >
+      <table class="w-full text-sm">
+        <colgroup>
+          <col>
+          <col class="w-24">
+          <col class="w-24">
+          <col class="w-12">
+        </colgroup>
+        <thead>
+          <tr>
+            <th class="py-2 text-start font-medium">
+              <span class="flex items-center gap-1">
+                {{ t('role.usage_pattern') }}
+                <i
+                  class="pi pi-question-circle text-surface-400"
+                  @mouseenter="(e: Event) => patternHelp?.show(e)"
+                  @mouseleave="() => patternHelp?.hide()"
+                />
+              </span>
+              <Popover ref="patternHelp">
+                <div class="text-sm font-normal">
+                  <p class="mb-2">
+                    {{ t('role.pattern_help_intro') }}
+                  </p>
+                  <ul class="flex flex-col gap-1">
+                    <li class="whitespace-nowrap">
+                      <Badge
+                        value=">"
+                        severity="secondary"
+                        size="small"
+                      /> — {{ t('role.pattern_help_all') }}
+                    </li>
+                    <li class="whitespace-nowrap">
+                      <Badge
+                        value="MyAgent.*"
+                        severity="secondary"
+                        size="small"
+                      /> — {{ t('role.pattern_help_wildcard') }}
+                    </li>
+                    <li class="whitespace-nowrap">
+                      <Badge
+                        value="MyAgent.prod"
+                        severity="secondary"
+                        size="small"
+                      /> — {{ t('role.pattern_help_specific') }}
+                    </li>
+                  </ul>
+                </div>
+              </Popover>
+            </th>
+            <th class="py-2 text-start font-medium">
+              {{ t('role.usage_limit_value') }}
+            </th>
+            <th class="py-2 text-start font-medium">
+              {{ t('role.usage_period') }}
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(ul, index) in limits"
+            :key="`${ul.pattern}-${ul.period}-${index}`"
+            class="border-b border-surface-200 dark:border-surface-700"
+          >
+            <td class="py-2">
+              <div class="flex items-center gap-2">
+                <Badge
+                  :value="ul.pattern"
+                  severity="secondary"
+                  class="border border-gray-400/30"
+                />
+                <small
+                  v-if="ul.description"
+                  class="text-surface-500 dark:text-surface-400"
+                >
+                  {{ ul.description }}
+                </small>
+              </div>
+            </td>
+            <td class="py-2">
+              {{ ul.limit }} {{ t('role.calls_per') }}
+            </td>
+            <td class="py-2">
+              {{ getPeriodLabel(ul.period) }}
+            </td>
+            <td class="py-2 text-end">
+              <Button
+                icon="pi pi-times"
+                severity="secondary"
+                variant="text"
+                rounded
+                size="small"
+                @click="remove(ul.pattern, ul.period)"
+              />
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td class="py-2">
+              <div class="flex items-center">
+                <span class="whitespace-nowrap rounded-l border border-r-0 border-surface-300 bg-surface-100 px-2 py-1.5 text-xs text-muted-color dark:border-surface-600 dark:bg-surface-800">
+                  {{ AGENT_PREFIX }}
+                </span>
+                <InputText
+                  v-model="newPattern"
+                  placeholder=">"
+                  size="small"
+                  class="w-full rounded-l-none"
+                />
+              </div>
+            </td>
+            <td class="py-2">
+              <InputText
+                v-model.number="newLimit"
+                type="number"
+                min="1"
+                :placeholder="t('role.usage_limit_value')"
+                size="small"
+                class="w-full"
+              />
+            </td>
+            <td class="py-2">
+              <select
+                v-model="newPeriod"
+                class="w-full rounded border border-surface-300 bg-surface-0 px-2 py-1.5 text-sm dark:border-surface-600 dark:bg-surface-900"
+              >
+                <option
+                  v-for="opt in periodOptions"
+                  :key="opt.value"
+                  :value="opt.value"
+                >
+                  {{ opt.label }}
+                </option>
+              </select>
+            </td>
+            <td class="py-2 text-end">
+              <Button
+                type="button"
+                icon="pi pi-plus"
+                :label="t('role.add_button')"
+                size="small"
+                :disabled="!canAdd"
+                @click="add"
+              />
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { UsageLimitDTO } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const patternHelp = ref()
+const AGENT_PREFIX = 'aihub.user.agent.'
+const PERIOD_VALUES = ['1h', '1d', '7d', '1mo'] as const
+
+const limits = defineModel<UsageLimitDTO[]>('limits', { required: true })
+
+const isUnlimited = ref(limits.value.length === 0)
+
+watch(isUnlimited, (val) => {
+  if (val) {
+    limits.value = []
+  }
+})
+
+const periodOptions = computed(() =>
+  PERIOD_VALUES.map(value => ({ value, label: t(`period.${value}`) })),
+)
+
+const getPeriodLabel = (period: string): string => t(`period.${period}`)
+
+const newPattern = ref('>')
+const newLimit = ref<number>(100)
+const newPeriod = ref<string>('1d')
+
+const canAdd = computed(() => {
+  if (!newPattern.value || !newLimit.value || newLimit.value < 1 || !newPeriod.value) {
+    return false
+  }
+  const fullPattern = `${AGENT_PREFIX}${newPattern.value}`
+  return !limits.value.some(ul => ul.pattern === fullPattern && ul.period === newPeriod.value)
+})
+
+const add = () => {
+  if (!canAdd.value) return
+  const fullPattern = `${AGENT_PREFIX}${newPattern.value}`
+  limits.value.push({ pattern: fullPattern, limit: newLimit.value, period: newPeriod.value })
+  newPattern.value = '>'
+  newLimit.value = 100
+  newPeriod.value = '1d'
+}
+
+const remove = (pattern: string, period: string) => {
+  limits.value = limits.value.filter(ul => !(ul.pattern === pattern && ul.period === period))
+}
+</script>