Nachricht (Chat) — UI-Kit-Galerie

Beispiele

Nutzer-Beitrag (Blase rechts) mit Anhang

auftraege-august.csv24 kB

Kannst du mir die überfälligen Aufträge zusammenfassen?

09:41

Assistenten-Antwort mit Aktions-Leiste (erscheint beim Überfahren)

NEX-Assistent09:41

Zwei Aufträge sind überfällig:
#4712 Beispiel AG (seit 3 Tagen)
#4718 Muster GmbH (seit 1 Tag)

Soll ich Erinnerungen versenden?

Antwort im Schreiben (Cursor)

NEX-Assistent

Ich prüfe gerade die offenen Positionen

System-Hinweis

Kontext gewechselt: Arbeitsbereich „Vertrieb"

Eigenschaften

Prop	Typ	Default	Builder-Label
role	string: user \| assistant \| system	"assistant"	Rolle
text *	string	—	Text
author	string	""	Name (Assistent/System)
avatarUrl	string	""	Avatar-Bild
time	string	""	Zeitstempel
attachments	array	[]	Anhänge
actions	boolean	false	Aktions-Leiste zeigen
streaming	boolean	false	Schreibt gerade (Cursor)

* Pflicht-Prop

Events & Slots

Events: ⚡ action — im Surface per on: {<event>: {action, params}} verdrahtbar.

Slot default: akzeptiert component.*, ui.*

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

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.hairlinecolor.action.primarycolor.border.defaultcolor.status.infocolor.status.successcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedcontainer.mdduration.fasteasing.standardfont.family.defaultleading.looseradius.controlradius.fullradius.smradius.surfacesize.1size.2size.3size.4size.6size.8text.mdtext.smtext.xsweight.semibold

LLM-Notizen

component.message

Eine Chat-Nachricht. role steuert das Layout: user = Blase rechts, assistant = Fließtext links mit Avatar, system = schmaler Hinweis-Streifen.

Wann nutzen

Immer INNERHALB von component.conversation (die kümmert sich um Scrollen und Sticky-Bottom).
Zusatz-Bausteine (reasoning, tool, plan, sources, task) kommen in den default-Slot der Nachricht — sie gehören inhaltlich zur Antwort.

Wichtige Props

text* (nl2br-gerendert, immer escaped), author, time, avatarUrl
attachments = [{name, meta?}]
actions: blendet Kopieren/Neu erzeugen/Daumen ein (erscheinen beim Überfahren)
streaming: blinkender Cursor am Textende („schreibt gerade")

Beispiel-Node


{
  "definition": "component.message",
  "props": {"role": "assistant", "author": "NEX-Assistent", "text": "Zwei Aufträge sind überfällig.", "actions": true},
  "slots": {"default": [{"definition": "component.tool", "props": {"name": "snappy_cli__task_list", "state": "done"}}]}
}

Hinweise

Emittiert action mit {action: copy|retry|up|down} — Kopieren funktioniert eigenständig.