humainflow-web/src/app/shared/nodes/human-interaction/human-interaction.html

<div class="hi-node">
  <div class="hi-header cursor-move">
    <div class="hi-icon">
      <i class="bi bi-person-check-fill"></i>
    </div>
    <div class="hi-header-content">
      <span class="hi-title">Human Task</span>
      <div class="hi-subtitle-row">
        <span class="hi-subtitle">{{ name }}</span>
        <button type="button" class="hi-name-edit-btn" title="Edit name" (pointerdown)="$event.stopPropagation()" (click)="openNameEditor($event)">
          <i class="bi bi-pencil-square"></i>
        </button>
      </div>
    </div>
    @if (missingRequiredParams.length) {
    <div class="hi-warning-wrap">
      <div class="hi-warning">
        <i class="bi bi-exclamation-triangle-fill"></i>
      </div>
      <div class="hi-warning-tooltip">
        <div class="hi-warning-title">Missing required fields</div>
        @for (missing of missingRequiredParams; track missing) {
        <div class="hi-warning-item">{{ missing }}</div>
        }
      </div>
    </div>
    }
  </div>

  <div class="hi-body">
    <div class="hi-columns">
      <div class="hi-column">
        <div class="hi-column-title">Inputs</div>
        @for (input of inputs; track input.key) {
        <div class="hi-row hi-row-input">
          <div
            refComponent
            class="hi-socket"
            [data]="{
              type: 'socket',
              side: 'input',
              key: input.key,
              nodeId: data.id,
              payload: input.socket
            }"
            [emit]="emit">
          </div>
          <span class="hi-pill hi-pill-input">{{ input.key }}</span>
        </div>
        }
      </div>

      <div class="hi-column">
        <div class="hi-column-title hi-column-title-right">Outputs</div>
        @for (output of outputs; track output.key) {
        <div class="hi-row hi-row-output">
          <span class="hi-pill hi-pill-output">{{ output.key }}</span>
          <div
            refComponent
            class="hi-socket hi-socket-right"
            [data]="{
              type: 'socket',
              side: 'output',
              key: output.key,
              nodeId: data.id,
              payload: output.socket
            }"
            [emit]="emit">
          </div>
        </div>
        }
      </div>
    </div>

    <div class="hi-panel">
      <div class="hi-panel-title-row">
        <div class="hi-panel-title">Action</div>
        <button type="button" class="hi-edit-btn" title="Edit action" (pointerdown)="$event.stopPropagation()" (click)="openActionEditor($event)">
          <i class="bi bi-pen"></i>
        </button>
      </div>
      <div class="hi-panel-text">{{ actionDescription || '-' }}</div>
    </div>

    <div class="hi-panel hi-panel-simulated">
      <div class="hi-panel-title">Simulated with</div>
      <div class="hi-meta">
        <span class="hi-meta-chip">
          <span class="hi-meta-chip-head">
            Provider
            <button type="button" class="hi-edit-btn" title="Edit provider" (pointerdown)="$event.stopPropagation()" (click)="openSimpleParamEditor('provider', $event)">
              <i class="bi bi-pen"></i>
            </button>
          </span>
          <span class="hi-meta-chip-value">{{ provider || '-' }}</span>
        </span>
        <span class="hi-meta-chip">
          <span class="hi-meta-chip-head">
            Model
            <button type="button" class="hi-edit-btn" title="Edit model" (pointerdown)="$event.stopPropagation()" (click)="openSimpleParamEditor('model', $event)">
              <i class="bi bi-pen"></i>
            </button>
          </span>
          <span class="hi-meta-chip-value">{{ model || '-' }}</span>
        </span>
      </div>
    </div>
  </div>

  @if (localEditorOpen) {
  <div class="hi-modal-backdrop" (pointerdown)="$event.stopPropagation()" (click)="closeSimpleParamEditor($event)">
    <div class="hi-modal" (pointerdown)="$event.stopPropagation()" (click)="$event.stopPropagation()">
      <div class="hi-modal-title">Edit {{ localEditorLabel }}</div>
      <div class="hi-modal-field">
        <label>{{ localEditorLabel }}</label>
        @if (localEditorLoading) {
        <input type="text" [ngModel]="localEditorValue" placeholder="Loading..." disabled (pointerdown)="$event.stopPropagation()" />
        } @else if (localEditorKey !== 'name' && localEditorOptions.length) {
        <select [(ngModel)]="localEditorValue" (pointerdown)="$event.stopPropagation()">
          <option value="">Select {{ localEditorLabel | lowercase }}...</option>
          @for (option of localEditorOptions; track option) {
          <option [value]="option">{{ option }}</option>
          }
        </select>
        } @else {
        <input type="text" [(ngModel)]="localEditorValue" [attr.maxlength]="localEditorKey === 'name' ? 20 : null" [placeholder]="localEditorKey === 'name' ? 'Max 20 characters' : 'Value...'" (pointerdown)="$event.stopPropagation()" />
        }
      </div>
      <div class="hi-modal-actions">
        <button type="button" class="hi-btn hi-btn-ghost" (pointerdown)="$event.stopPropagation()" (click)="closeSimpleParamEditor($event)">Cancel</button>
        <button type="button" class="hi-btn hi-btn-primary" (pointerdown)="$event.stopPropagation()" (click)="saveSimpleParamEditor($event)">Save</button>
      </div>
    </div>
  </div>
  }
</div>