# XWUIMailThread

Renders an email conversation as a vertical stack of messages from `data.messages`, where the newest (last) message is always expanded and older ones start collapsed (honoring each message's `expanded` flag); clicking a collapsed message's header (HTML-escaped sender plus localized date) toggles it open. Each message body is rendered via the host-supplied `data.bodySlot(host, message)` callback, or falls back to a sandboxed iframe from `message.bodyHtml`, or plain `message.bodyText`. `setMessages()` replaces the conversation and re-renders. It is the threaded-conversation view composed by the mail reading screens, and is typically paired with `XWUIMailHtmlBody` via `bodySlot` for secure body rendering.

## Usage

```ts
import { XWUIMailThread } from '@exonware/xwui/industry/email';

new XWUIMailThread(
  document.getElementById('app')!,
  {
    messages: [
      { id: 'm1', from: 'Alex Rivera', to: ['sarah@example.com'], subject: 'Q1 strategy', date: '2026-06-20T08:00:00Z', bodyText: 'Kicking this off.' },
      { id: 'm2', from: 'Sarah Lee', to: ['alex@example.com'], subject: 'Re: Q1 strategy', date: '2026-06-24T09:30:00Z', bodyHtml: '<p>Looks good - shipping it.</p>' },
    ],
  },
);
```

## Basic Usage

A two-message conversation; the newest message starts expanded.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A two-message conversation; the newest message starts expanded.
```

## Long conversation

A four-message thread where older messages collapse and the latest stays open.

```example
file: examples/LongConversation.ts
html: examples/LongConversation.html
title: Long conversation
description: A four-message thread where older messages collapse and the latest stays open.
```

## Custom body renderer

A thread whose bodySlot renders each message body into a styled host element.

```example
file: examples/CustomBodySlot.ts
html: examples/CustomBodySlot.html
title: Custom body renderer
description: A thread whose bodySlot renders each message body into a styled host element.
```

```api
```