@swiss-ai-hub/web 0.290.11

package/components/Agent/Card.vue

@@ -0,0 +1,139 @@
+<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 }"
+    @click="emit('click', agent)"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <div class="flex items-center justify-start gap-2">
+        <div
+          class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+        >
+          <Icon
+            :name="agent.agent_config.icon"
+            size="1.5em"
+          />
+        </div>
+        <div>
+          <h3 class="font-semibold opacity-80">
+            {{ agent?.agent_config.name }}
+          </h3>
+          <p class="text-xs font-light opacity-70">
+            {{ agent.agent_class }} / {{ agent.agent_id }}
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <Tag
+          v-if="agent.is_online"
+          severity="success"
+          :value="t('agent.list.online')"
+        />
+        <Tag
+          v-else
+          severity="danger"
+          :value="t('agent.list.offline')"
+        />
+        <Button
+          v-tooltip.top="t('agent.list.clone')"
+          icon="pi pi-clone"
+          severity="secondary"
+          text
+          rounded
+          size="small"
+          @click.stop="emit('clone', agent)"
+        />
+        <Button
+          v-if="showDelete"
+          icon="pi pi-trash"
+          severity="secondary"
+          text
+          rounded
+          size="small"
+          :loading="isDeleting"
+          @click.stop="confirmDelete"
+        />
+      </div>
+    </div>
+    <div>
+      <span class="text-xs">
+        {{ agent.agent_config.description }}
+      </span>
+      <div class="pt-2">
+        <Tag
+          v-if="agent.is_conversational"
+          :value="t('agent.can_chat')"
+          severity="secondary"
+          icon="pi pi-comments"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FullAgentInstanceDto } from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  agent: FullAgentInstanceDto
+  showDelete?: boolean
+}>(), {
+  showDelete: true,
+})
+
+const emit = defineEmits<{
+  deleted: [agentClass: string, agentId: string]
+  click: [agent: FullAgentInstanceDto]
+  clone: [agent: FullAgentInstanceDto]
+}>()
+
+const route = useRoute()
+const { t } = useI18n()
+const toast = useToast()
+const confirm = useConfirm()
+const { tenantId } = useTenant()
+const { deleteAgentInstance, isDeleting } = useDeleteAgentInstance()
+
+const isActive = computed(() => {
+  return route.params.agent_id === props.agent.agent_id && route.params.agent_class === props.agent.agent_class
+})
+
+function confirmDelete() {
+  confirm.require({
+    message: t('agent.delete.confirmMessage'),
+    header: t('agent.delete.title'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectLabel: t('agent.create.cancel'),
+    acceptLabel: t('agent.delete.button'),
+    acceptClass: 'p-button-danger',
+    accept: handleDelete,
+  })
+}
+
+async function handleDelete() {
+  try {
+    await deleteAgentInstance({
+      agentClass: props.agent.agent_class,
+      agentId: props.agent.agent_id,
+      tenantId: tenantId.value!,
+    })
+
+    toast.add({
+      severity: 'success',
+      summary: t('agent.delete.success'),
+      life: 3000,
+    })
+
+    emit('deleted', props.agent.agent_class, props.agent.agent_id)
+  }
+  catch (error) {
+    console.error('Failed to delete agent:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('agent.delete.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+}
+</script>

package/components/Agent/Configuration.vue

@@ -0,0 +1,20 @@
+<template>
+  <FormKitDynamicConfiguration
+    :form="form"
+    :initial-data="initialData"
+    @submit="emit('submit', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FormkitElement } from '@core/sdk/client'
+
+defineProps<{
+  form: FormkitElement[]
+  initialData?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  submit: [Record<string, unknown>]
+}>()
+</script>

package/components/Agent/CreateModal.vue

@@ -0,0 +1,287 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('agent.create.title')"
+    :style="{ width: '50rem' }"
+    :closable="!isSubmitting"
+  >
+    <div class="flex flex-col gap-6">
+      <div
+        v-if="agentClassesAreLoading"
+        class="flex items-center justify-center py-8"
+      >
+        <ProgressSpinner />
+      </div>
+
+      <div
+        v-else-if="!agentClasses || agentClasses.length === 0"
+        class="py-8 text-center text-surface-500"
+      >
+        {{ t('agent.create.noAgentClasses') }}
+      </div>
+
+      <template v-else>
+        <div
+          v-if="!hasFixedClass"
+          class="flex flex-col gap-2"
+        >
+          <label
+            for="agentClass"
+            class="text-sm font-medium"
+          >
+            {{ t('agent.create.selectClass') }}
+          </label>
+          <Select
+            v-model="selectedClass"
+            :options="agentClasses"
+            option-label="agent_class"
+            option-value="agent_class"
+            :placeholder="t('agent.create.selectClassPlaceholder')"
+            class="w-full"
+            :disabled="isSubmitting"
+          />
+        </div>
+
+        <div
+          v-if="selectedClassData && configForm.length > 0 && formReady"
+          class="content flex flex-col gap-2"
+        >
+          <FormKit
+            id="create-agent-form"
+            v-model="formData"
+            type="form"
+            :actions="false"
+            :config="{
+              validationVisibility: 'dirty',
+            }"
+            @submit="handleFormSubmit"
+            @submit-invalid="isSubmitting = false"
+          >
+            <Stepper
+              v-model:value="activeStep"
+              orientation="vertical"
+            >
+              <StepItem
+                v-if="simpleElementsSchema.length > 0"
+                :value="0"
+              >
+                <Step>{{ t('agent.create.steps.basicInfo') }}</Step>
+                <StepPanel>
+                  <div class="flex flex-col gap-6 py-4">
+                    <FormKitSchema
+                      :schema="simpleElementsSchema"
+                      :data="formData"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+              <StepItem
+                v-for="(group, index) in groupConfigs"
+                :key="`group-${group.name}`"
+                :value="getGroupStepIndex(index)"
+              >
+                <Step>{{ group.label || group.name }}</Step>
+                <StepPanel>
+                  <div class="content py-4">
+                    <FormKitSchema
+                      :schema="group.schema"
+                      :data="formData"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+              <StepItem
+                v-for="(rep, index) in repeaterConfigs"
+                :key="`repeater-${rep.path}`"
+                :value="getRepeaterStepIndex(index)"
+              >
+                <Step>{{ rep.label || rep.name }}</Step>
+                <StepPanel>
+                  <div class="py-4">
+                    <FormKitRepeater
+                      :model-value="getRepeaterData(rep.path)"
+                      :name="rep.name"
+                      :label="rep.label"
+                      :add-label="rep.addLabel"
+                      :children-schema="rep.childrenSchema"
+                      :min="rep.min"
+                      :max="rep.max"
+                      @update:model-value="setRepeaterData(rep.path, $event)"
+                    />
+                  </div>
+                </StepPanel>
+              </StepItem>
+            </Stepper>
+          </FormKit>
+        </div>
+      </template>
+    </div>
+
+    <template #footer>
+      <Button
+        :label="t('agent.create.cancel')"
+        severity="secondary"
+        @click="closeModal"
+      />
+      <Button
+        :label="t('agent.create.submit')"
+        :disabled="!selectedClass || isSubmitting"
+        :loading="isSubmitting"
+        @click="triggerFormSubmit"
+      />
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { type FormElement, normalizeFormLocaleStrings } from '@core/composables/form/useFormKitTransform'
+import { getNode } from '@formkit/core'
+
+const props = defineProps<{
+  modelValue: boolean
+  initialClass?: string
+  initialData?: Record<string, unknown> | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'success': [agentClass: string, agentId: string]
+}>()
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const { agentClasses, agentClassesAreLoading } = useAgentClasses()
+const { createAgentInstance } = useCreateAgentInstance()
+const { tenantId } = useTenant()
+
+const {
+  selectedClass,
+  formData,
+  activeStep,
+  selectedClassData,
+  configForm,
+  simpleElementsSchema,
+  groupConfigs,
+  repeaterConfigs,
+  getGroupStepIndex,
+  getRepeaterStepIndex,
+  getRepeaterData,
+  setRepeaterData,
+  cleanFormData,
+  coerceNullableToggles,
+  applyInitialData,
+  resetForm,
+} = useCreateInstanceForm({
+  classes: agentClasses,
+  classField: 'agent_class',
+  idField: 'agent_id',
+  initialClass: () => props.initialClass ?? '',
+  locale,
+})
+
+const isSubmitting = ref(false)
+const formReady = ref(false)
+const hasFixedClass = computed(() => !!props.initialClass)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+watch(visible, async (isVisible) => {
+  if (!isVisible) {
+    formReady.value = false
+    return
+  }
+  await nextTick()
+  if (props.initialData) {
+    applyInitialData(props.initialData)
+  }
+  formReady.value = true
+})
+
+function closeModal() {
+  visible.value = false
+  resetForm()
+}
+
+function triggerFormSubmit() {
+  isSubmitting.value = true
+  const formNode = getNode('create-agent-form')
+  if (formNode) {
+    formNode.submit()
+  }
+  else {
+    handleFormSubmit()
+  }
+}
+
+async function handleFormSubmit() {
+  try {
+    const cleanedData = cleanFormData(formData.value)
+    const coerced = coerceNullableToggles(cleanedData, configForm.value as FormElement[])
+    const normalizedConfig = normalizeFormLocaleStrings(coerced)
+    const agentId = normalizedConfig.agent_id as string
+    await createAgentInstance({
+      agentClass: selectedClass.value,
+      tenantId: tenantId.value!,
+      request: {
+        agent_id: agentId,
+        configuration: normalizedConfig,
+      },
+    })
+
+    toast.add({
+      severity: 'success',
+      summary: t('agent.create.success'),
+      life: 3000,
+    })
+
+    emit('success', selectedClass.value, agentId)
+    closeModal()
+  }
+  catch (error) {
+    console.error('Failed to create agent:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('agent.create.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+  finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  @apply font-light text-xs
+}
+
+.content :deep(.formkit-group-fieldset) {
+  @apply flex flex-col gap-6;
+}
+
+.content :deep(.formkit-outer) {
+  @apply pt-3 pb-1;
+}
+
+.content :deep(.formkit-group-fieldset legend) {
+  @apply hidden;
+}
+
+.content :deep(.formkit-slider-value-input) {
+  @apply w-20;
+}
+
+.content :deep(.formkit-slider-value-input .p-inputnumber-input) {
+  @apply text-center text-sm;
+}
+
+.content :deep(#create-agent-form-incomplete) {
+  @apply font-bold text-sm text-right pr-2;
+}
+</style>

package/components/Agent/EmptyCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col justify-center gap-3 rounded-xl border-2 border-dashed border-surface-300 p-4 hover:border-primary-500 hover:bg-surface-50 dark:border-surface-600 dark:hover:bg-surface-800"
+    @click="handleAdd"
+  >
+    <div class="flex items-center justify-center">
+      <div class="flex items-center justify-center p-3">
+        <i
+          class="pi pi-plus-circle text-surface-400"
+          style="font-size: 1.5rem"
+        />
+      </div>
+    </div>
+    <div class="text-center">
+      <h3 class="font-medium text-surface-600 dark:text-surface-400">
+        {{ t('agent.add_instance.title') }}
+      </h3>
+      <p class="text-sm text-surface-500 dark:text-surface-400">
+        {{ t('agent.add_instance.description') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  add: []
+}>()
+
+const handleAdd = () => {
+  emit('add')
+}
+</script>

package/components/Agent/List.vue

@@ -0,0 +1,85 @@
+<template>
+  <DataTable
+    :value="agents"
+    size="small"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    @update:selection="emit('selected', $event)"
+  >
+    <Column
+      field="agent_config.name"
+      :header="t('agent.list.name')"
+    />
+    <Column
+      field="agent_config.description"
+      :header="t('agent.list.description')"
+    >
+      <template #body="{ data }">
+        <span class="text-xs">
+          {{ data.agent_config.description }}
+        </span>
+      </template>
+    </Column>
+    <Column
+      field="agent_id"
+      :header="t('agent.list.agent')"
+    >
+      <template #body="{ data }">
+        <AvatarGroup>
+          <Avatar
+            :key="data.agent_id + data.agent_class"
+            v-tooltip="data.agent_config.name"
+          >
+            <template #icon>
+              <Icon
+                :name="data.agent_config.icon"
+                size="xl"
+              />
+            </template>
+          </Avatar>
+        </AvatarGroup>
+      </template>
+    </Column>
+    <Column
+      field="is_conversational"
+      :header="t('agent.list.is_conversational')"
+    >
+      <template #body="{ data }">
+        <Badge
+          :value="data.is_conversational ? t('agent.list.true') : t('agent.list.false')"
+        />
+      </template>
+    </Column>
+    <Column
+      field="is_online"
+      :header="t('agent.list.status')"
+    >
+      <template #body="{ data }">
+        <Tag
+          v-if="data.is_online"
+          severity="success"
+          :value="t('agent.list.online')"
+        />
+        <Tag
+          v-else
+          severity="danger"
+          :value="t('agent.list.offline')"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type { FullAgentInstanceDto } from '@core/sdk/client'
+
+defineProps<{
+  agents: FullAgentInstanceDto[]
+}>()
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  selected: [AGENT: FullAgentInstanceDto]
+}>()
+</script>

package/components/Agent/TemplateCard.vue

@@ -0,0 +1,58 @@
+<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"
+    @click="emit('click')"
+  >
+    <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="templateIcon"
+          size="1.5em"
+        />
+      </div>
+      <div>
+        <h3 class="font-semibold opacity-80">
+          {{ templateName }}
+        </h3>
+        <p class="text-xs font-light opacity-70">
+          {{ agentClassName }}
+        </p>
+      </div>
+    </div>
+    <div>
+      <span class="text-xs">
+        {{ templateDescription }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TemplateData } from '@core/sdk/client'
+
+type LocaleKey = 'de' | 'en' | 'fr' | 'it'
+
+const props = defineProps<{
+  template: TemplateData
+  agentClassName: string
+  locale: string
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+const templateName = computed(() => {
+  return props.template.name?.[props.locale as LocaleKey] ?? props.template.name?.en ?? ''
+})
+
+const templateDescription = computed(() => {
+  return props.template.description?.[props.locale as LocaleKey] ?? props.template.description?.en ?? ''
+})
+
+const templateIcon = computed(() => {
+  return props.template.icon ?? 'meteor-icons:robot'
+})
+</script>

package/components/AppLoader.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="loader"
+    :style="{ '--loader-size': `${size}px`, '--loader-step': `${stepPx}px` }"
+  />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: number
+  }>(),
+  {
+    size: 64,
+  },
+)
+
+// Round to integer pixels to avoid sub-pixel rendering artifacts in the animation
+const stepPx = computed(() => Math.round(props.size * 0.547))
+</script>
+
+<style scoped>
+.loader {
+  position: relative;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  overflow: hidden;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  border-radius: 50px;
+  box-shadow: 0 0 0 3px inset #808080;
+  animation: loader-spin 2.5s infinite;
+  will-change: inset;
+}
+
+.loader:after {
+  animation-delay: -1.25s;
+}
+
+@keyframes loader-spin {
+  0%    { inset: 0 var(--loader-step) var(--loader-step) 0; }
+  12.5% { inset: 0 var(--loader-step) 0 0; }
+  25%   { inset: var(--loader-step) var(--loader-step) 0 0; }
+  37.5% { inset: var(--loader-step) 0 0 0; }
+  50%   { inset: var(--loader-step) 0 0 var(--loader-step); }
+  62.5% { inset: 0 0 0 var(--loader-step); }
+  75%   { inset: 0 0 var(--loader-step) var(--loader-step); }
+  87.5% { inset: 0 0 var(--loader-step) 0; }
+  100%  { inset: 0 var(--loader-step) var(--loader-step) 0; }
+}
+</style>