Konversation (Chat-Container) — UI-Kit-Galerie

Beispiele

Verlauf mit zwei Nachrichten (scrollt, haftet unten)

Wie viele offene Aufträge haben wir diese Woche?

Assistent

Aktuell sind 12 Aufträge offen, davon 2 überfällig. Soll ich die überfälligen auflisten?

Eigenschaften

Prop	Typ	Default	Builder-Label
height	string: auto \| sm \| md \| lg	"md"	Höhe des Verlaufs
stickToBottom	boolean	true	Am unteren Rand haften
maxWidth	string: none \| md \| lg	"lg"	Lesebreite des Verlaufs

* Pflicht-Prop

Events & Slots

Slot default: akzeptiert component.*, ui.*, layout.*

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
`--conversation-border-default`	`var(--color-border-default)`
`--conversation-elevation-overlay`	`var(--elevation-overlay)`
`--conversation-radius-full`	`var(--radius-full)`
`--conversation-surface-overlay`	`var(--color-surface-overlay)`
`--conversation-text-default`	`var(--color-text-default)`
`--conversation-text-muted`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.surface.overlaycolor.text.defaultcolor.text.mutedcontainer.lgcontainer.mdelevation.overlayfont.family.defaultradius.fullsize.32size.4size.8

LLM-Notizen

component.conversation

Der Chat-Container: scrollt, hält den Blick unten, zeigt beim Hochscrollen einen Zurück-nach-unten-Knopf.

Wann nutzen

Als Hülle um alle component.message-Knoten (und um confirmation/checkpoint/suggestion, die zwischen den Nachrichten stehen).
maxWidth: lg gibt dem Verlauf Lesebreite — die Prompt-Eingabe darunter auf denselben Wert setzen.

Wichtige Props

height: auto | sm | md | lg — im App-Layout meist lg.
stickToBottom: neue Beiträge scrollen nach, solange der Nutzer unten steht.
maxWidth: none | md | lg.

Beispiel-Node


{
  "definition": "component.conversation",
  "props": {"height": "lg", "maxWidth": "lg"},
  "slots": {"default": [ {"definition": "component.message", "props": {"role": "user", "text": "Hallo"}} ]}
}