Attachment Preview

ngx-prompt-kit original — not part of ibelick/prompt-kit

Horizontal chip row for staged attachments above a prompt input. Image type renders an inline thumbnail; file/audio/video render an icon + filename + size. Hover or focus a chip to reveal its remove button.

Examples

Mixed types

Image with thumbnail, plus a PDF and an audio attachment. Filename truncates inside the chip; full size is rendered via Intl.NumberFormat.

<pk-attachment-preview
  [attachments]="attachments()"
  (clicked)="openPreview($event)"
  (removed)="remove($event)"
/>

Image-heavy

Four images in a row. Each thumbnail is the actual click target — wire (clicked) to your lightbox or preview pane.

<pk-attachment-preview
  [attachments]="images()"
  (clicked)="openLightbox($event)"
  (removed)="remove($event)"
/>

Overflow with maxVisible

When [maxVisible] > 0 and the attachments array is longer, surplus chips collapse into a square '+N' pill that matches the chip height. The pill is non-interactive — consumers wire whatever (e.g., open a gallery) at the host level.

<pk-attachment-preview
  [attachments]="attachments()"
  [maxVisible]="3"
  (clicked)="openPreview($event)"
  (removed)="remove($event)"
/>

Installation

Add the attachment-preview component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:attachment-preview

Component API

PkAttachmentPreview

Prop	Type	Default	Description
attachments	`readonly Attachment[]`	—	The attachments to render (required).
maxVisible	`number`	0	When > 0, only the first N chips render and the surplus collapses into a "+N more" pill. 0 shows all.
removable	`boolean`	true	When false, chips do not show the remove (X) button.
locale	`string \| undefined`	—	BCP-47 locale for the byte size formatter. Defaults to runtime locale.
class	`string`	—	Extra classes for the host.

PkAttachmentChip

Prop	Type	Default	Description
attachment	`Attachment`	—	Single attachment to render (required).
removable	`boolean`	true	Show the remove button.
locale	`string \| undefined`	—	Forwarded to the byte size formatter.

Outputs

Prop	Type	Default	Description
clicked	`(id: string) => void`	—	Chip body clicked — wire to your preview/lightbox handler.
removed	`(id: string) => void`	—	Remove (X) button clicked.