# ChatMessage

`ChatMessage` presents a speaker label, message body and optional source as a user or assistant message.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { ChatMessage } from "@dg/ui";
</script>

<ChatMessage role="user" text="Where is the archive?" />
<ChatMessage label="Guide" source="Collection index"><p>Open <a href="/archive">the archive</a>.</p></ChatMessage>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the article; `role` is the message role, not an ARIA role.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Contained message surfaces have soft `0.75rem` corners; user and assistant layout remain distinct.
- The message body takes the body role, even inside an interface context such as `ChatWindow`, and children inherit it. Plain `text` keeps its line breaks; compose `.formatted` in children for paragraph rhythm.

## Parameters

| Name       | Type                    | Default       | Description                                                                                                |
| ---------- | ----------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
| `role`     | `'user' \| 'assistant'` | `"assistant"` | Chooses message alignment, width and surface.                                                              |
| `label`    | `string`                | `undefined`   | Speaker name. Defaults to the built-in name for the role in the `Page` language, such as You or Assistant. |
| `text`     | `string`                | `""`          | Escaped plain-text message, used when no children snippet is provided.                                     |
| `source`   | `string`                | `""`          | Optional source or attribution below the message.                                                          |
| `children` | `Snippet`               | `undefined`   | Rich message content replacing text. The app is responsible for sanitizing any rendered HTML.              |

## Accessibility

Keep the speaker label meaningful. Plain text is escaped. The app must sanitize any untrusted HTML rendered in children; the component does not parse Markdown or validate source URLs.