ChatMessage

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

01Preview

You

Tell me about the project.

Assistant

A shared language for art and the web.

Collection guide

02Usage

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

<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>

03Notes

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.

04Parameters

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.

05Accessibility

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.

Related subjects

Markdown source: components/chat-message