53 lines
2.5 KiB
HTML
53 lines
2.5 KiB
HTML
@if (state(); as currentState) {
|
|
<div class="fixed inset-0 z-9999 flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-black/45" (click)="cancel($event)"></div>
|
|
|
|
<div class="relative z-10 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
|
|
<div class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-slate-900">{{ currentState.title }}</h3>
|
|
<p class="mt-1 text-sm text-slate-500">Confirm the input as node output or edit it before sending.</p>
|
|
</div>
|
|
<button type="button" mat-stroked-button (click)="cancel($event)">Close</button>
|
|
</div>
|
|
|
|
<div class="grid flex-1 gap-4 overflow-y-auto px-5 py-4">
|
|
<fieldset class="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
|
<legend class="px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Action Description</legend>
|
|
<div class="max-h-32 overflow-y-auto whitespace-pre-wrap break-words text-sm text-slate-800">{{ currentState.actionDescription || '-' }}</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
|
<legend class="px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Current Input</legend>
|
|
<div class="max-h-56 overflow-y-auto whitespace-pre-wrap break-words font-mono text-sm text-slate-800">{{ currentState.currentInput || '-' }}</div>
|
|
</fieldset>
|
|
|
|
@if (editing()) {
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Edit Response</mat-label>
|
|
<textarea
|
|
matInput
|
|
class="min-h-56"
|
|
rows="10"
|
|
[ngModel]="draftValue"
|
|
[attr.data-autofocus]="'true'"
|
|
(ngModelChange)="setDraftValue($event)">
|
|
</textarea>
|
|
</mat-form-field>
|
|
}
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2 border-t border-slate-200 px-5 py-4">
|
|
<button type="button" mat-stroked-button (click)="cancel($event)">Cancel</button>
|
|
@if (!editing()) {
|
|
<button type="button" mat-stroked-button (click)="startEditing($event)">Edit Response</button>
|
|
<button type="button" mat-flat-button (click)="confirmInput($event)">Confirm Input</button>
|
|
} @else {
|
|
<button type="button" mat-stroked-button (click)="backToConfirm($event)">Back</button>
|
|
<button type="button" mat-flat-button [disabled]="!canSendEditedOutput()" (click)="sendEditedOutput($event)">Send Output</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|