Nachricht (Chat) — component.message
Chat-Nachricht: Nutzer als Blase rechts, Assistent als Fließtext links mit Avatar; optionale Anhänge, Aktions-Leiste (Kopieren, Bewerten, Neu erzeugen) und Zeitstempel
Beispiele
Nutzer-Beitrag (Blase rechts) mit Anhang
Assistenten-Antwort mit Aktions-Leiste (erscheint beim Überfahren)
Antwort im Schreiben (Cursor)
System-Hinweis
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
role | string: user | assistant | system | "assistant" |
text * | string | — |
author | string | "" |
avatarUrl | string | "" |
time | string | "" |
attachments | array | [] |
actions | boolean | false |
streaming | boolean | false |
Events & Slots
Events: action
Slot default: akzeptiert component.*, ui.*
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--message-action-primary | var(--color-action-primary) |
--message-border-default | var(--color-border-default) |
--message-radius-control | var(--radius-control) |
--message-radius-full | var(--radius-full) |
--message-radius-sm | var(--radius-sm) |
--message-radius-surface | var(--radius-surface) |
--message-status-info | var(--color-status-info) |
--message-status-success | var(--color-status-success) |
--message-surface-default | var(--color-surface-default) |
--message-surface-sunken | var(--color-surface-sunken) |
--message-text-default | var(--color-text-default) |
--message-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairline color.action.primary color.border.default color.status.info color.status.success color.surface.default color.surface.sunken color.text.default color.text.muted container.md duration.fast easing.standard font.family.default leading.loose radius.control radius.full radius.sm radius.surface size.1 size.2 size.3 size.4 size.6 size.8 text.md text.sm text.xs weight.semibold