@swiss-ai-hub/web 0.290.11

package/components/FormKit/AgentSelector.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Agent Class Selection -->
+    <div>
+      <label
+        for="agent-class-select"
+        class="mb-1 block text-sm font-medium"
+      >
+        {{ t('agent.selector.class.label') }}
+      </label>
+      <Select
+        v-model="selectedClass"
+        input-id="agent-class-select"
+        :options="filteredClassOptions"
+        option-label="displayName"
+        option-value="name"
+        :placeholder="classPlaceholder ?? t('agent.selector.class.placeholder')"
+        :filter="filter"
+        :loading="isLoading"
+        class="w-full"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <Icon
+              :name="option.icon || 'mage:robot'"
+              size="1.2em"
+            />
+            <span>{{ option.displayName }}</span>
+          </div>
+        </template>
+        <template #value="{ value }">
+          <div
+            v-if="value"
+            class="flex items-center gap-2"
+          >
+            <Icon
+              :name="getClassIcon(value)"
+              size="1.2em"
+            />
+            <span>{{ getClassDisplayName(value) }}</span>
+          </div>
+        </template>
+      </Select>
+    </div>
+
+    <!-- Agent ID Selection (shown when class selected) -->
+    <div v-if="selectedClass">
+      <label
+        for="agent-id-select"
+        class="mb-1 block text-sm font-medium"
+      >
+        {{ t('agent.selector.id.label') }}
+      </label>
+      <Select
+        v-model="selectedId"
+        input-id="agent-id-select"
+        :options="idOptions"
+        option-label="displayName"
+        option-value="id"
+        :placeholder="idPlaceholder ?? t('agent.selector.id.placeholder')"
+        :filter="filter"
+        :loading="isLoadingInstances"
+        class="w-full"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <Icon
+              :name="option.icon || 'mage:user'"
+              size="1.2em"
+            />
+            <span>{{ option.displayName }}</span>
+          </div>
+        </template>
+        <template #value="{ value }">
+          <div
+            v-if="value"
+            class="flex items-center gap-2"
+          >
+            <Icon
+              :name="getIdIcon(value)"
+              size="1.2em"
+            />
+            <span>{{ getIdDisplayName(value) }}</span>
+          </div>
+        </template>
+      </Select>
+      <small class="mt-1 text-surface-500">
+        {{ t('agent.selector.id.help') }}
+      </small>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getAgentClasses, getAgentClassInstances } from '@core/sdk/client'
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { AgentClassDto, FullAgentInstanceDto, LocaleString } from '@core/sdk/client'
+
+/**
+ * Extracts the localized string from a LocaleString object.
+ * Falls back to first available value if the requested locale is not available.
+ */
+function getLocalizedValue(localeString: LocaleString | string | undefined, locale: string): string {
+  if (!localeString) return ''
+  if (typeof localeString === 'string') return localeString
+
+  // LocaleString object - try to get the current locale, fallback to en, then any
+  return (localeString as Record<string, string>)[locale]
+    || (localeString as Record<string, string>).en
+    || Object.values(localeString)[0]
+    || ''
+}
+
+interface AgentSelectorValue {
+  agent_class: string
+  agent_id: string
+}
+
+interface ClassOption {
+  name: string
+  displayName: string
+  icon: string
+}
+
+interface IdOption {
+  id: string
+  displayName: string
+  icon: string
+}
+
+interface AgentSelectorProps {
+  context: {
+    node: {
+      input: (value: AgentSelectorValue | null) => void
+    }
+    value?: AgentSelectorValue | null
+    attrs: Record<string, unknown>
+    startEvent?: string
+    classPlaceholder?: string
+    idPlaceholder?: string
+    filter?: boolean
+  }
+}
+
+const props = defineProps<AgentSelectorProps>()
+const { t, locale } = useI18n()
+const { tenantId } = useTenant()
+
+// Get custom props from context (FormKit passes them there, not as direct props)
+const startEvent = computed(() => props.context.startEvent)
+const classPlaceholder = computed(() => props.context.classPlaceholder)
+const idPlaceholder = computed(() => props.context.idPlaceholder)
+const filter = computed(() => props.context.filter ?? true)
+
+// State
+const agentClasses = ref<AgentClassDto[]>([])
+const agentInstances = ref<FullAgentInstanceDto[]>([])
+const isLoading = ref(false)
+const isLoadingInstances = ref(false)
+
+// Get current value from context
+const currentValue = computed(() => props.context.value ?? null)
+
+// Selected class (computed property that syncs with the form value)
+const selectedClass = computed({
+  get: () => currentValue.value?.agent_class ?? null,
+  set: (value: string | null) => {
+    if (value) {
+      // When class changes, reset agent ID and fetch instances
+      emitValue(value, '')
+      fetchInstances(value)
+    }
+    else {
+      props.context.node.input(null)
+      agentInstances.value = []
+    }
+  },
+})
+
+// Selected agent ID (computed property that syncs with the form value)
+const selectedId = computed({
+  get: () => currentValue.value?.agent_id ?? null,
+  set: (value: string | null) => {
+    if (selectedClass.value && value) {
+      emitValue(selectedClass.value, value)
+    }
+  },
+})
+
+// Emit complete value object
+function emitValue(agentClass: string, agentId: string) {
+  props.context.node.input({
+    agent_class: agentClass,
+    agent_id: agentId,
+  })
+}
+
+// Class options for select
+const classOptions = computed<ClassOption[]>(() =>
+  agentClasses.value.map(cls => ({
+    name: cls.agent_class,
+    displayName: getLocalizedValue(cls.name, locale.value) || useChangeCase(cls.agent_class, 'capitalCase'),
+    icon: cls.icon || 'mage:robot',
+  })),
+)
+
+// Filtered class options based on startEvent
+const filteredClassOptions = computed<ClassOption[]>(() => {
+  if (!startEvent.value) return classOptions.value // No filter = show all
+
+  return classOptions.value.filter((classOption) => {
+    const agentClass = agentClasses.value.find(c => c.agent_class === classOption.name)
+    if (!agentClass) return false
+
+    // Check if any start_event matches the filter
+    return agentClass.start_events.some(event =>
+      event.event_name === startEvent.value
+      || event.event_parents.includes(startEvent.value!),
+    )
+  })
+})
+
+// ID options based on selected class
+const idOptions = computed<IdOption[]>(() => {
+  return agentInstances.value.map(instance => ({
+    id: instance.agent_config.agent_id,
+    displayName: instance.agent_config.name || instance.agent_config.agent_id,
+    icon: instance.agent_config.icon || 'mage:user',
+  }))
+})
+
+function getClassIcon(name: string): string {
+  const option = classOptions.value.find(opt => opt.name === name)
+  return option?.icon ?? 'mage:robot'
+}
+
+function getClassDisplayName(name: string): string {
+  const option = classOptions.value.find(opt => opt.name === name)
+  return option?.displayName ?? name
+}
+
+function getIdIcon(id: string): string {
+  const option = idOptions.value.find(opt => opt.id === id)
+  return option?.icon ?? 'mage:user'
+}
+
+function getIdDisplayName(id: string): string {
+  const option = idOptions.value.find(opt => opt.id === id)
+  return option?.displayName ?? id
+}
+
+async function fetchClasses() {
+  isLoading.value = true
+  try {
+    const response = await getAgentClasses({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value! },
+    })
+    agentClasses.value = response
+  }
+  catch (error) {
+    console.error('Failed to fetch agent classes:', error)
+    agentClasses.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+async function fetchInstances(agentClass: string) {
+  isLoadingInstances.value = true
+  try {
+    const response = await getAgentClassInstances({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value!, agent_class: agentClass },
+    })
+    agentInstances.value = response
+  }
+  catch (error) {
+    console.error(`Failed to fetch instances for class "${agentClass}":`, error)
+    agentInstances.value = []
+  }
+  finally {
+    isLoadingInstances.value = false
+  }
+}
+
+// Fetch classes on mount
+onMounted(() => {
+  fetchClasses()
+
+  // If there's already a selected class, fetch its instances
+  if (currentValue.value?.agent_class) {
+    fetchInstances(currentValue.value.agent_class)
+  }
+})
+
+// Refetch if startEvent changes
+watch(startEvent, () => {
+  // Clear selection if current class no longer matches filter
+  if (selectedClass.value && !filteredClassOptions.value.some(opt => opt.name === selectedClass.value)) {
+    props.context.node.input(null)
+    agentInstances.value = []
+  }
+})
+</script>

package/components/FormKit/ChipsInput.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <InputText
+      v-model="draft"
+      :input-id="inputId"
+      :placeholder="placeholder"
+      class="w-full"
+      @keydown.enter.stop.prevent="commitDraft"
+      @keyup.enter.stop.prevent
+      @keypress.enter.stop.prevent
+      @blur="commitDraft"
+    />
+    <div
+      v-if="chips.length > 0"
+      class="flex flex-wrap gap-2"
+    >
+      <Chip
+        v-for="value in chips"
+        :key="value"
+        :label="value"
+        removable
+        @remove="removeChip(value)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ChipsInputProps {
+  context: {
+    node: { input: (value: string[]) => void }
+    value?: string[] | null
+    placeholder?: string
+    inputId?: string
+  }
+}
+
+const props = defineProps<ChipsInputProps>()
+
+const placeholder = computed(() => props.context.placeholder)
+const inputId = computed(() => props.context.inputId)
+const draft = ref('')
+
+const chips = computed<string[]>({
+  get: () => props.context.value ?? [],
+  set: (value: string[]) => props.context.node.input(value),
+})
+
+function commitDraft() {
+  const trimmed = draft.value.trim()
+  draft.value = ''
+  if (!trimmed)
+    return
+  if (chips.value.includes(trimmed))
+    return
+  chips.value = [...chips.value, trimmed]
+}
+
+function removeChip(value: string) {
+  chips.value = chips.value.filter(v => v !== value)
+}
+</script>

package/components/FormKit/DynamicConfiguration.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="content">
+    <FormKit
+      id="form"
+      v-model="data"
+      type="form"
+      :submit-label="t('common.actions.save')"
+      :submit-attrs="{
+        inputClass: 'p-button p-component w-full',
+      }"
+      :config="{
+        validationVisibility: 'blur',
+      }"
+      @submit="submitHandler"
+    >
+      <FormKitSchema
+        :schema="schema"
+        :data="{ ...data }"
+      />
+
+      <!-- Render repeaters separately (not supported by FormKit standard) -->
+      <FormKitRepeater
+        v-for="rep in repeaterElements"
+        :key="rep.path"
+        :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)"
+      />
+    </FormKit>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  buildFormKitSchema,
+  coerceNullableToggles,
+  extractRepeaterConfigs,
+  getNestedValue,
+  normalizeFormLocaleStrings,
+  seedFormDefaults,
+  seedNullableToggles,
+  setNestedValue,
+  type FormElement,
+  type RepeaterConfig,
+} from '@core/composables/form/useFormKitTransform'
+import { merge } from 'lodash-es'
+
+import type { FormkitElement } from '@core/sdk/client'
+import type { FormKitSchemaDefinition } from '@formkit/core'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  form: FormkitElement[]
+  initialData?: Record<string, unknown>
+}>()
+
+function hydrate(raw: Record<string, unknown>): Record<string, unknown> {
+  const seeded = seedNullableToggles(raw, props.form as FormElement[])
+  return seedFormDefaults(seeded, props.form as FormElement[])
+}
+
+const data = ref<Record<string, unknown>>(hydrate(props.initialData || {}))
+
+watch(() => props.initialData, (newData) => {
+  if (newData && Object.keys(newData).length > 0) {
+    data.value = merge({}, data.value, hydrate(newData))
+  }
+}, { deep: true })
+
+const emit = defineEmits<{
+  submit: [Record<string, unknown>]
+}>()
+
+function createLabelPattern(): RegExp {
+  const keys = Object.keys(data.value)
+  if (keys.length === 0) return /(?!)/ // Never matches
+  return new RegExp(keys.map(key => `\\$${key}`).join('|'), 'g')
+}
+
+function replaceLabelVariables(label: string): string {
+  const pattern = createLabelPattern()
+  return label.replace(pattern, (match: string) => {
+    const key = match.substring(1)
+    return (data.value[key] as string) || match
+  })
+}
+
+const schema = computed<FormKitSchemaDefinition>(() => {
+  return buildFormKitSchema(props.form as FormElement[], {
+    labelTransform: replaceLabelVariables,
+  })
+})
+
+const repeaterElements = computed<RepeaterConfig[]>(() => {
+  return extractRepeaterConfigs(props.form as FormElement[])
+})
+
+function getRepeaterData(path: string): Record<string, unknown>[] {
+  return getNestedValue(data.value, path)
+}
+
+function setRepeaterData(path: string, value: Record<string, unknown>[]): void {
+  setNestedValue(data.value, path, value)
+}
+
+async function submitHandler() {
+  const coerced = coerceNullableToggles(data.value, props.form as FormElement[])
+  const normalizedData = normalizeFormLocaleStrings(coerced)
+  emit('submit', normalizedData)
+}
+</script>
+
+<style scoped>
+.content {
+  @apply font-light text-xs
+}
+
+.content :deep(form) {
+  @apply gap-6;
+}
+
+.content :deep(.formkit-help) {
+  @apply text-xs font-light text-surface-500 dark:text-surface-400;
+}
+
+.content :deep(.formkit-outer) {
+  @apply pt-3 pb-1;
+}
+
+.content :deep(.formkit-group-fieldset) {
+  @apply border border-surface-300 dark:border-surface-600 rounded-lg p-4 mb-4;
+}
+
+.content :deep(.formkit-group-fieldset legend) {
+  @apply text-sm font-semibold px-2 text-surface-700 dark:text-surface-300;
+}
+
+.content :deep(.formkit-group-fieldset .formkit-group-fieldset) {
+  @apply ml-2 mt-2;
+}
+
+.content :deep(.formkit-slider-value-input) {
+  @apply w-20;
+}
+
+.content :deep(.formkit-slider-value-input .p-inputnumber-input) {
+  @apply text-center text-sm;
+}
+</style>

package/components/FormKit/IconSelector.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex items-center gap-3">
+    <!-- Icon preview (fixed width to prevent layout shift) -->
+    <div class="flex w-8 shrink-0 items-center justify-center">
+      <Icon
+        v-if="selectedIcon"
+        :name="selectedIcon"
+        class="text-2xl text-surface-700 dark:text-surface-200"
+      />
+      <Icon
+        v-else
+        name="mage:image"
+        class="text-2xl text-surface-300 dark:text-surface-600"
+      />
+    </div>
+
+    <!-- Editable Select -->
+    <Select
+      v-model="selectedIcon"
+      :options="iconOptions"
+      :editable="true"
+      :placeholder="placeholder"
+      option-label="name"
+      option-value="name"
+      class="grow"
+    >
+      <!-- Option template - shows icon + name for each option -->
+      <template #option="{ option }">
+        <div class="flex items-center gap-2">
+          <Icon
+            :name="option.name"
+            class="shrink-0 text-lg"
+          />
+          <span>{{ option.name }}</span>
+        </div>
+      </template>
+    </Select>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface IconSelectorProps {
+  context: {
+    node: {
+      input: (value: string) => void
+    }
+    value?: string
+    attrs: Record<string, unknown>
+    options?: string[]
+    placeholder?: string
+  }
+}
+
+const props = defineProps<IconSelectorProps>()
+
+// Get options from context (passed from backend)
+const options = computed(() => props.context.options ?? [])
+const placeholder = computed(() => props.context.placeholder ?? 'Select or enter an icon...')
+
+// Convert string options to objects for Select component
+const iconOptions = computed(() =>
+  options.value.map(name => ({ name })),
+)
+
+// Current selected icon value
+const selectedIcon = computed({
+  get: () => props.context.value ?? '',
+  set: (newVal: string) => {
+    props.context.node.input(newVal || '')
+  },
+})
+</script>

package/components/FormKit/KnowledgeDatabaseSelector.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <MultiSelect
+      v-model="selectedDatabases"
+      :options="databaseOptions"
+      option-label="displayName"
+      option-value="name"
+      :placeholder="placeholder ?? t('common.selectDatabases')"
+      :filter="filter"
+      display="chip"
+      class="w-full"
+      :loading="isLoading"
+    >
+      <template #option="{ option }">
+        <div class="flex items-center gap-2">
+          <Icon
+            name="mage:database"
+            size="1.2em"
+          />
+          <span>{{ option.displayName }}</span>
+        </div>
+      </template>
+    </MultiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getDatabases } from '@core/sdk/client'
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+import type { DatabaseDto } from '@core/sdk/client'
+
+interface DatabaseOption {
+  name: string
+  displayName: string
+}
+
+interface KnowledgeDatabaseSelectorProps {
+  context: {
+    node: { input: (value: string[] | null) => void }
+    value?: string[] | null
+    placeholder?: string
+    filter?: boolean
+  }
+}
+
+const props = defineProps<KnowledgeDatabaseSelectorProps>()
+const { t } = useI18n()
+const { tenantId } = useTenant()
+
+const placeholder = computed(() => props.context.placeholder)
+const filter = computed(() => props.context.filter ?? true)
+
+const databases = ref<DatabaseDto[]>([])
+const isLoading = ref(false)
+
+const selectedDatabases = computed({
+  get: () => props.context.value ?? [],
+  set: (value: string[]) => {
+    props.context.node.input(value.length > 0 ? value : null)
+  },
+})
+
+const databaseOptions = computed<DatabaseOption[]>(() =>
+  databases.value.map(db => ({
+    name: db.name,
+    displayName: db.display_name || useChangeCase(db.name, 'capitalCase').value,
+  })),
+)
+
+async function fetchDatabases() {
+  isLoading.value = true
+  try {
+    const response = await getDatabases({
+      composable: '$fetch',
+      path: { tenant_id: tenantId.value! },
+    })
+    databases.value = response
+  }
+  catch (error) {
+    console.error('Failed to fetch databases:', error)
+    databases.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDatabases()
+})
+</script>