Chat Attachment Alpha Light DOM & Tailwind

Usage

Chat Attachment presents one attached image or file in the Chat family — in the composer while it is pending, and in the message log once it has been sent. The same markup works in both places.

import "@nordhealth/components/lib/ChatAttachment"

Composition

Presentation follows placement

A pending upload and a delivered one are read differently, so the element resolves its own presentation from where it sits:

• Inside a Chat Composer or Chat Composer Drawer, an image is a compact thumbnail with the name beneath it.
• Anywhere else, an image is a captioned card cropped to one ratio, so a thread mixing portrait and landscape uploads still reads as an even column.

Files are the same compact pill in both positions. Only images differ, which is why the two chat surfaces cannot drift apart.

src is what makes it an image

There is no kind to keep in sync. An attachment with a src renders as an image; without one there is nothing to preview, so it renders as a file. This makes contradictory combinations impossible to express.

Removal

removable adds a localized remove action and is normally used only in the composer — a sent attachment is a record, not a pending change. Listen for the cancelable nord-attachment-remove event and update the application-owned collection; the element never removes itself or revokes object URLs.

<nord-chat-composer-drawer role="group" aria-label="Attachments">
  <nord-chat-attachment
    name="recovery-photo.jpg"
    src="/recovery-photo.jpg"
    removable
  ></nord-chat-attachment>
  <nord-chat-attachment name="care-plan.pdf" removable></nord-chat-attachment>
</nord-chat-composer-drawer>

Image loading

Images load eagerly by default. A message log is anchored to its newest message, so an image that resolves after that scroll shifts the content the reader is looking at. Set loading="lazy" for long histories where most attachments start far outside the viewport.

Examples

Delivered attachments

Attachments sit alongside the message text inside the bubble:

<nord-chat-message sender="user" name="Einar Veselý">
  <nord-chat-message-bubble>
    <span class="n:flex n:flex-col n:gap-xs">
      <nord-chat-attachment
        name="recovery-photo.jpg"
        src="/recovery-photo.jpg"
      ></nord-chat-attachment>
      <span>I’ve also attached a photo from today.</span>
    </span>
  </nord-chat-message-bubble>
</nord-chat-message>

Pending attachments in the composer

Keep image previews and files in two sibling containers so the scrollable preview strip and the wrapping file pills stay independent:

Chat Composer Token is reserved for atomic inline values inside Composer Input or Tokenized Text. Do not use it as a pending attachment.

Accessibility

Use alt when the image communicates something the name does not. Otherwise leave it empty: the visible name already identifies the attachment, and a duplicate makes screen readers announce the filename twice.

When a message or composer carries several attachments, wrap them in an element with role="group" and a label describing the count, so their relationship to the message is clear.