# Message

> A single conversational turn in a message log: a row composing a bottom-anchored avatar, a header for the sender's identity and timing, a content slot for the message's own surface, and an optional footer for its actions.

```ts
import { Message } from "@sdxc/ui";
```

Renders the message row as a two-column grid whose `"avatar"` area spans only the
header and content rows, anchoring Message.Avatar to the bottom edge
of Message.Content, regardless of whether Message.Footer renders.

## Examples

```tsx
<Message>
	<Message.Avatar>
		<Avatar>
			<Avatar.Image src={sender.avatarUrl} alt={sender.name} />
			<Avatar.Fallback>{sender.initials}</Avatar.Fallback>
		</Avatar>
	</Message.Avatar>
	<Message.Header>
		<strong>{sender.name}</strong>
		<time dateTime={message.sentAt}>{formattedTime}</time>
	</Message.Header>
	<Message.Content>
		<Bubble>{message.text}</Bubble>
	</Message.Content>
	<Message.Footer>
		<Button
			aria-label={t("message.copy")}
			commandfor={`${message.id}-text`}
			command={COPY_COMMAND}
			mix={copyToClipboard()}
		>
			<CopyIcon />
		</Button>
		<Button aria-label={t("message.like")} onClick={likeMessage}>
			<ThumbsUpIcon />
		</Button>
	</Message.Footer>
</Message>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The row's compound parts: Message.Avatar, Message.Header, Message.Content, and an optional Message.Footer. |

Also accepts everything in `TagProps<"article">`.


### Message.Avatar

Renders Message.AvatarProps.children as the row's avatar slot, aligned to the `"avatar"` area's block-end edge so it tracks the bottom edge of Message.Content.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | An Avatar instance identifying the message's sender. |

Also accepts everything in `TagProps<"div">`.


### Message.Header

Renders Message.HeaderProps.children as the row's identity line, wrapping until the `ui-message` container passes `26rem`, then settling onto one row with the sender's name first and later children as secondary metadata.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The sender's name, typically followed by a timestamp. |

Also accepts everything in `TagProps<"header">`.


### Message.Content

Renders Message.ContentProps.children as the row's content slot, capped to a comfortable reading measure and never narrower than its grid area.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The message's own surface — a Bubble, an attachment card, or any other rendered turn content. |

Also accepts everything in `TagProps<"div">`.


### Message.Footer

Renders Message.FooterProps.children as the row's action slot, occupying the grid's `"footer"` area beneath Message.Content and never reached by Message.Avatar's bottom anchor.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The row's actions, typically a copy Button and a like Button. |

Also accepts everything in `TagProps<"footer">`.


### Message.Group

Renders Message.GroupProps.children as a run of consecutive Message rows sharing the same sender, stacked with a hairline gap that reads as one continuous turn.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | A run of consecutive Message rows sharing the same sender. |

Also accepts everything in `TagProps<"div">`.