# XWUIChatTranscript

The canonical full chat-surface component - an optional left chat-list rail (`showChatList` + `data.chatList`), a header slot, a scrollable message stream, a reply-preview bar, and a composer (composing `XWUIInputChat`). The stream renders `data.entries` (each `kind: 'message' | 'system' | 'date'`) as `XWUIMessageBubble` bubbles, date dividers, and system rows, plus a typing indicator (`data.typing`), reactions strips, read-receipt status icons, forwarded-from labels, and reply-to quoted previews. Messages whose `senderId` matches `viewerId` render as "own"; when `entries` is empty it shows a welcome panel (`welcomeTitle`/`welcomeSubtitle`) with an optional `suggestedPrompts` grid for the AI-assistant pattern. Long histories use windowed rendering (`maxRenderedEntries`) with a sticky-bottom jump-to-latest button and unseen badge, and `appendEntry()` / `prependEntries()` / `updateMessage()` / `setEntries()` / `setTyping()` / `setReplyTo()` drive it programmatically.

## Messenger Day

A populated two-way conversation with a date divider, system event, message bubbles, a reaction and read receipt, a reply preview, and a typing indicator.

```example
file: examples/MessengerDay.ts
html: examples/MessengerDay.html
title: Messenger Day
description: A live messenger transcript with date divider, system row, reactions, a read receipt, a reply preview, and a typing indicator (viewerId "me", autoScroll off).
```

## Welcome State

The empty AI-assistant state: a welcome title/subtitle and a four-button suggested-prompts grid above the composer.

```example
file: examples/WelcomeState.ts
html: examples/WelcomeState.html
title: Welcome State
description: An empty transcript showing the "How can I help?" welcome panel with four suggested prompts, driving the Ops AI Assistant page.
```

## Two Pane Desktop

The WhatsApp-Web / Telegram-Web two-column layout: showChatList plus a host-supplied conversation-list rail and header slot beside the transcript.

```example
file: examples/TwoPaneDesktop.ts
html: examples/TwoPaneDesktop.html
title: Two Pane Desktop
description: Desktop two-pane shape with a consumer-supplied chatList rail and header element next to the message stream.
```

## Read Only Channel

A public announcement channel with the composer hidden, mixing date dividers, a pinned system row, and a forwarded post.

```example
file: examples/ReadOnlyChannel.ts
html: examples/ReadOnlyChannel.html
title: Read Only Channel
description: A read-only broadcast channel (showComposer off) with date dividers, a system row, and a "Forwarded from" message.
```

```api
```