File Upload

<pk-file-upload
  #fu
  accept=".jpg,.png,.pdf"
  (filesAdded)="addFiles($event)"
>
  <pk-prompt-input
    [(value)]="input"
    [isLoading]="isLoading()"
    (submitted)="onSubmit()"
  >
    @if (files().length) {
      <div class="grid grid-cols-2 gap-2 pb-2">
        @for (f of files(); track $index) {
          <div class="bg-secondary flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm">
            <span class="truncate">{{ f.name }}</span>
            <button (click)="removeFile($index)">
              <ng-icon hlm size="xs" name="lucideX" />
            </button>
          </div>
        }
      </div>
    }

    <pk-prompt-input-textarea placeholder="Type a message or drop files..." />

    <pk-prompt-input-actions class="mt-2 flex items-center justify-between">
      <pk-prompt-input-action tooltip="Attach files">
        <button hlmBtn variant="ghost" size="icon-sm"
                (click)="fu.openPicker(); $event.stopPropagation()">
          <ng-icon hlm size="sm" name="lucidePaperclip" />
        </button>
      </pk-prompt-input-action>
      <pk-prompt-input-action tooltip="Send">
        <button hlmBtn size="icon-sm" (click)="onSubmit()">
          <ng-icon hlm size="xs" name="lucideArrowUp" />
        </button>
      </pk-prompt-input-action>
    </pk-prompt-input-actions>
  </pk-prompt-input>

  <pk-file-upload-content>
    <div class="flex min-h-[200px] w-full items-center justify-center backdrop-blur-sm">
      <div class="bg-background/90 border-border m-4 max-w-md rounded-lg border p-8 shadow-lg text-center">
        <ng-icon hlm size="lg" name="lucideUpload" class="text-muted-foreground" />
        <h3 class="text-base font-medium">Drop files to upload</h3>
        <p class="text-muted-foreground text-sm">Release to add files to your message</p>
      </div>
    </div>
  </pk-file-upload-content>
</pk-file-upload>