[Feature] Dynamic additional information rendering in frontend (#282)

This implements a version of #274, relying on Pydantics built in JSON schema and JSON rendering.
Requires additional UI tagging in the ai model repo but will remove HTML tags.

Example scenario with filled information: 5882df9c-dae1-4d80-a40e-db4724271456/scenario/3a4d395a-6a6d-4154-8ce3-ced667fceec0

Reviewed-on: enviPath/enviPy#282
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
2026-01-31 00:44:03 +13:00
committed by jebus
parent 9f63a9d4de
commit d80dfb5ee3
42 changed files with 3732 additions and 609 deletions

View File

@ -0,0 +1,66 @@
{# Number input widget - pure HTML template #}
<div class="form-control">
<div class="flex flex-col gap-2 sm:flex-row sm:items-baseline">
<!-- Label -->
<label class="label sm:w-48 sm:shrink-0">
<span
class="label-text"
:class="{
'text-error': hasError,
'text-sm text-base-content/60': isViewMode
}"
x-text="label"
></span>
</label>
<!-- Input column -->
<div class="flex-1">
<!-- Help text -->
<template x-if="helpText">
<div class="label">
<span
class="label-text-alt text-base-content/60"
x-text="helpText"
></span>
</div>
</template>
<!-- View mode: show value with unit -->
<template x-if="isViewMode">
<div class="mt-1">
<span class="text-base" x-text="value"></span>
<template x-if="value && unit">
<span class="text-xs" x-text="unit"></span>
</template>
</div>
</template>
<!-- Edit mode: input with unit suffix -->
<template x-if="isEditMode">
<div :class="unit ? 'join w-full' : ''">
<input
type="number"
:class="unit ? 'input input-bordered join-item flex-1' : 'input input-bordered w-full'"
class:input-error="hasError"
x-model="value"
/>
<template x-if="unit">
<span
class="btn btn-ghost join-item no-animation pointer-events-none"
x-text="unit"
></span>
</template>
</div>
</template>
<!-- Errors -->
<template x-if="hasError">
<div class="label">
<template x-for="errMsg in errors" :key="errMsg">
<span class="label-text-alt text-error" x-text="errMsg"></span>
</template>
</div>
</template>
</div>
</div>
</div>