@swiss-ai-hub/web 0.290.11

package/components/Process/CreateModal.vue

@@ -0,0 +1,276 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('process.create.title')"
+    :style="{ width: '50rem' }"
+    :closable="!isCreating"
+  >
+    <div class="flex flex-col gap-6">
+      <div
+        v-if="processClassesAreLoading"
+        class="flex items-center justify-center py-8"
+      >
+        <ProgressSpinner />
+      </div>
+
+      <div
+        v-else-if="!processClasses || processClasses.length === 0"
+        class="py-8 text-center text-surface-500"
+      >
+        {{ t('process.create.noProcessClasses') }}
+      </div>
+
+      <template v-else>
+        <div
+          v-if="!hasFixedClass"
+          class="flex flex-col gap-2"
+        >
+          <label
+            for="processClass"
+            class="text-sm font-medium"
+          >
+            {{ t('process.create.selectClass') }}
+          </label>
+          <Select
+            v-model="selectedClass"
+            :options="processClasses"
+            option-label="process_class"
+            option-value="process_class"
+            :placeholder="t('process.create.selectClassPlaceholder')"
+            class="w-full"
+            :disabled="isCreating"
+          />
+        </div>
+
+        <div
+          v-if="selectedClassData && configForm.length > 0 && formReady"
+          class="content flex flex-col gap-2"
+        >
+          <FormKit
+            id="create-process-form"
+            v-model="formData"
+            type="form"
+            :actions="false"
+            :config="{
+              validationVisibility: 'dirty',
+            }"
+            @submit="handleFormSubmit"
+          >
+            <Stepper
+              v-model:value="activeStep"
+              orientation="vertical"
+            >
+              <StepItem
+                v-if="simpleElementsSchema.length > 0"
+                :value="0"
+              >
+                <Step>{{ t('process.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('process.create.cancel')"
+        severity="secondary"
+        @click="closeModal"
+      />
+      <Button
+        :label="t('process.create.submit')"
+        :disabled="!selectedClass || isCreating"
+        :loading="isCreating"
+        @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': [processClass: string, processId: string]
+}>()
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const { processClasses, processClassesAreLoading } = useProcessClasses()
+const { createProcessInstance, isCreating } = useCreateProcessInstance()
+
+const {
+  selectedClass,
+  formData,
+  activeStep,
+  selectedClassData,
+  configForm,
+  simpleElementsSchema,
+  groupConfigs,
+  repeaterConfigs,
+  getGroupStepIndex,
+  getRepeaterStepIndex,
+  getRepeaterData,
+  setRepeaterData,
+  cleanFormData,
+  coerceNullableToggles,
+  applyInitialData,
+  resetForm,
+} = useCreateInstanceForm({
+  classes: processClasses,
+  classField: 'process_class',
+  idField: 'process_id',
+  initialClass: () => props.initialClass ?? '',
+  locale,
+})
+
+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() {
+  const formNode = getNode('create-process-form')
+  if (formNode) {
+    formNode.submit()
+  }
+}
+
+async function handleFormSubmit() {
+  try {
+    const cleanedData = cleanFormData(formData.value)
+    const coerced = coerceNullableToggles(cleanedData, configForm.value as FormElement[])
+    const normalizedConfig = normalizeFormLocaleStrings(coerced)
+    const processId = normalizedConfig.process_id as string
+    await createProcessInstance({
+      processClass: selectedClass.value,
+      request: {
+        process_id: processId,
+        configuration: normalizedConfig,
+      },
+    })
+
+    toast.add({
+      severity: 'success',
+      summary: t('process.create.success'),
+      life: 3000,
+    })
+
+    emit('success', selectedClass.value, processId)
+    closeModal()
+  }
+  catch (error) {
+    console.error('Failed to create process:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('process.create.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+}
+</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-process-form-incomplete) {
+  @apply font-bold text-sm text-right pr-2;
+}
+</style>

package/components/Process/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('process.add_instance.title') }}
+      </h3>
+      <p class="text-sm text-surface-500 dark:text-surface-400">
+        {{ t('process.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/Process/Form.vue

@@ -0,0 +1,153 @@
+<template>
+  <Panel
+    :header="title"
+    toggleable
+  >
+    <p class="text-xs dark:text-surface-500">
+      {{ description }}
+    </p>
+    <div class="content pt-6">
+      <div class="w-full">
+        <FormKit
+          id="form"
+          v-model="data"
+          type="form"
+          :submit-attrs="{
+            inputClass: 'p-button p-component w-full',
+          }"
+          :config="{
+            validationVisibility: 'blur',
+          }"
+          @submit="submitHandler"
+        >
+          <FormKitSchema
+            :schema="schema"
+            :data="data"
+          />
+        </FormKit>
+      </div>
+    </div>
+    <pre>{{ data }}</pre>
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import type { HtmlElement, InputText } from '@core/sdk/client'
+import type { FormKitSchemaNode, FormKitSchemaDefinition } from '@formkit/core'
+
+const props = defineProps<{
+  title: string
+  description: string
+  form: (HtmlElement | InputText)[]
+}>()
+const data = ref({ })
+
+const emit = defineEmits<{
+  submit: [Record<string, unknown>]
+}>()
+
+const schema = computed<FormKitSchemaDefinition>(() => {
+  const pattern = new RegExp(
+    Object.keys(data.value)
+      .map(key => `\\$${key}`)
+      .join('|'),
+    'g',
+  )
+  return props.form.map((form: HtmlElement | InputText) => {
+    const formkitNode = {
+      ...form,
+      $formkit: form.formkit,
+    } as FormKitSchemaNode
+    if (formkitNode?.label) {
+      formkitNode.label = formkitNode.label.replace(pattern, (match: string) => {
+        const key = match.substring(1)
+        return data.value[key] || match
+      })
+    }
+    return formkitNode
+  })
+})
+
+console.log(schema.value)
+
+async function submitHandler() {
+  console.log('submit', data.value)
+  emit('submit', data.value)
+}
+</script>
+
+<style scoped>
+.content {
+  @apply font-light text-xs
+}
+.content :deep(.formkit-outer){
+  @apply pt-3 pb-1;
+}
+.content :deep(h1) {
+  @apply pt-3 pb-1 text-xl font-bold;
+}
+
+.content :deep(h2) {
+  @apply pt-3 pb-1 text-lg font-bold;
+}
+
+.content :deep(h3) {
+  @apply pt-3 pb-1 text-base font-bold;
+}
+
+.content :deep(h4) {
+  @apply pt-3 pb-1 font-bold;
+}
+
+.content :deep(h5) {
+  @apply pt-3 pb-1 font-bold;
+}
+
+.content :deep(h6) {
+  @apply pt-3 pb-1 font-bold;
+}
+
+.content :deep(p) {
+  @apply pt-3 pb-1 ;
+}
+
+.content :deep(blockquote) {
+  @apply px-4 py-3 my-4 italic border-s-4 dark:border-gray-500/20 dark:bg-surface-800/20;
+}
+
+.content :deep(ul) {
+  @apply list-disc list-outside mt-2;
+}
+
+.content :deep(ol) {
+  @apply list-decimal list-outside mt-2;
+}
+
+.content :deep(ul > li) {
+  @apply ml-4 mt-2;
+}
+
+.content :deep(ol > li) {
+  @apply ml-6 mt-2;
+}
+
+.content :deep(strong) {
+  @apply font-bold;
+}
+
+.content :deep(p a) {
+  @apply  border-b border-dotted border-gray-400  after:content-['↗'] after:pl-[1px];
+}
+.content :deep(ul a) {
+  @apply  border-b border-dotted border-gray-400  after:content-['↗'] after:pl-[1px];
+}
+.content :deep(table) {
+  @apply my-8;
+}
+.content :deep(th) {
+  @apply border border-surface-200 dark:border-surface-500 p-2 text-left font-bold bg-surface-100 dark:bg-surface-800;
+}
+.content :deep(td) {
+  @apply border border-surface-200 dark:border-surface-500 p-2 text-left;
+}
+</style>

package/components/Process/Starts.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <ProcessForm
+      v-for="(humanInput, index) in humanInputs"
+      :key="index"
+      class="w-1/2"
+      :title="resolveLocale(humanInput.name)"
+      :description="resolveLocale(humanInput.description)"
+      :form="humanInput.form"
+      @submit="submitForm($event, humanInput)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+import type { HumanInSpecsReadable, LocaleString } from '@core/sdk/client'
+
+defineProps<{
+  humanInputs: HumanInSpecsReadable[]
+}>()
+
+const route = useRoute()
+const { locale } = useI18n()
+const { sendProcessStartForm } = useSendProcessStartForm()
+const { tenantId } = useTenant()
+
+const resolveLocale = (localeString: LocaleString): string => {
+  const key = locale.value as keyof LocaleString
+  return localeString?.[key] ?? localeString?.en ?? localeString?.de ?? ''
+}
+
+const submitForm = async (form: Record<string, unknown>, humanInput: HumanInSpecsReadable) => {
+  await sendProcessStartForm({
+    processClass: route.params.process_class as string,
+    processId: route.params.process_id as string,
+    submissionRoute: humanInput.route,
+    submissionMethod: humanInput.method,
+    data: form,
+    tenantId: tenantId.value!,
+  })
+}
+</script>

package/components/Process/Walkthrough/List.vue

@@ -0,0 +1,162 @@
+<template>
+  <DataTable
+    :value="walkthroughs"
+    table-style="min-width: 50rem"
+    selection-mode="single"
+    :selection="selectedWalkthrough"
+    size="small"
+    @update:selection="emit('selected', $event)"
+  >
+    <Column
+      field="Created"
+      :header="t('process.walkthrough.list.created')"
+    >
+      <template #body="{ data }">
+        <p>{{ formatted(data.created_at) }}</p>
+      </template>
+    </Column>
+    <Column
+      field="agents"
+      :header="t('process.walkthrough.list.agents')"
+    >
+      <template #body="{ data }">
+        <AvatarGroup>
+          <Avatar
+            v-for="agent in data.involved_agents"
+            :key="agent.agent_id + agent.agent_class"
+            v-tooltip.top="agent.agent_config.name"
+          >
+            <template #icon>
+              <Icon
+                :name="agent.agent_config.icon"
+                size="xl"
+              />
+            </template>
+          </Avatar>
+        </AvatarGroup>
+      </template>
+    </Column>
+    <Column
+      field="users"
+      :header="t('process.walkthrough.list.users')"
+    >
+      <template #body="{ data }">
+        <AvatarGroup>
+          <Avatar
+            v-for="user in data.involved_humans"
+            :key="user.id"
+            v-tooltip.top="user.name"
+            :image="user?.profile_image ?? undefined"
+            :label="!user?.profile_image ? initials(user) : undefined"
+            shape="circle"
+          />
+        </AvatarGroup>
+      </template>
+    </Column>
+    <Column
+      field="updated_at"
+      :header="t('process.walkthrough.list.updated')"
+    >
+      <template #body="{ data }">
+        <Tag
+          :value="getTimeAgo(data.updated_at / 1000000).text"
+          :severity="getTimeAgo(data.updated_at / 1000000).severity"
+        />
+      </template>
+    </Column>
+    <Column
+      field="process_steps"
+      :header="t('process.walkthrough.list.steps')"
+    >
+      <template #body="{ data }">
+        <div class="relative flex w-fit flex-row gap-3">
+          <div class="absolute inset-x-12 top-4 border-t-4 border-dotted border-gray-400/50" />
+          <div
+            v-for="step in data.process_steps"
+            :key="step.step_index"
+            class="z-50 flex w-24 flex-col items-center justify-center gap-1"
+          >
+            <Avatar
+              v-tooltip.top="tooltipForStep(step)"
+              :class="{
+                'bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-100': step.is_completed,
+              }"
+              shape="circle"
+              size="normal"
+            >
+              <Icon
+                :name="iconForStep(step)"
+                size="small"
+              />
+            </Avatar>
+            <p class="w-full truncate text-center text-xs">
+              {{ nameForStep(step) }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import type {
+  AgentProcessStepDto,
+  HumanProcessStepDto,
+  MinimalUserDto,
+  ProcessWalkthroughDto,
+  ProgramProcessStepDto,
+} from '@core/sdk/client'
+
+type ProcessStepDto = AgentProcessStepDto | ProgramProcessStepDto | HumanProcessStepDto
+
+const props = defineProps<{
+  walkthroughs: ProcessWalkthroughDto[]
+}>()
+
+const emit = defineEmits<{
+  selected: [walkthrough: ProcessWalkthroughDto]
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+const { getTimeAgo } = useTimeAgo()
+
+const iconForStep = (process_step: ProcessStepDto) => {
+  if (process_step.step_type === 'human') {
+    return 'mage:user'
+  }
+  if (process_step.step_type === 'program') {
+    return 'tdesign:code'
+  }
+  if (process_step.step_type === 'agent') {
+    return process_step.work_request?.agent_info?.agent_config?.icon ?? process_step.work_response?.agent_info?.agent_config?.icon ?? 'meteor-icons:robot'
+  }
+}
+const tooltipForStep = (process_step: ProcessStepDto) => {
+  if (process_step.step_type === 'human' && process_step.work_response) {
+    return process_step.work_response.data.submitted_by.email
+  }
+  if (process_step.step_type === 'program') {
+    return ''
+  }
+  if (process_step.step_type === 'agent') {
+    if (process_step.work_request) {
+      return process_step.work_request?.agent_info?.agent_config?.name
+    }
+    return process_step.work_response?.agent_info?.agent_config?.name
+  }
+}
+const nameForStep = (process_step: ProcessStepDto) => {
+  return process_step.work_response?.event_name ?? process_step.work_request?.event_name
+}
+
+const initials = (user: MinimalUserDto) => user.name?.split(' ').map(n => n[0]).join('')
+const formatted = (timestamp: number) => useDateFormat(new Date(timestamp / 1000000), 'DD.MM.YYYY HH:mm:ss')
+
+const selectedWalkthrough = computed(() => {
+  return props.walkthroughs.filter((walkthrough: ProcessWalkthroughDto) => {
+    return walkthrough.process_walkthrough_id === route.params.process_walkthrough_id
+  })
+})
+</script>