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

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"}} ]}
}