## Message Thread (S—128)

A compact chat: your message slides up from the composer, shows Sent then Read, and a typing indicator precedes replies.

- URL: https://sundaeui.dev/components/message-thread
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/message-thread.json`
- Tags: chat, messages, social, typing-indicator, bubbles, composer

Sending moves the text from the composer into a new bubble that grows in from the bottom right. The status under your last bubble goes Sending → Sent → Read.
A three-dot typing bubble appears before the other side replies. Consecutive bubbles from the same person group with tighter corners.

### Usage

```tsx
import { MessageThread } from '@/components/sundae/message-thread'

<MessageThread />
```

### Props

- `messages` (`{ id: string; from: "me" | "them"; text: string }[]`, required): Initial thread.
- `onSend` (`(text: string) => Promise<string | void>`): Send handler; return a reply to show it.
- `name` (`string`): Other person’s name.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Support chat, DMs, comment threads on mobile.

### When not to use

- Long-form discussion: use a comment list.

### Accessibility

- The thread is a log (role="log") so new messages are announced.
- The composer is a labelled textarea; Enter sends, Shift+Enter adds a line.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter: Send
- Shift + Enter: New line