Prompt-Eingabe
Chat-Eingabe: mitwachsendes Textfeld, Enter sendet (Umschalt+Enter = Zeilenumbruch), Werkzeugleiste (Anhang, Modell) und Senden/Stop-Knopf
Nutzt: ui.icon
Beispiele
Leer (Enter sendet, Feld wächst mit)
Antwortet gerade — Senden wird zu Stop
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| placeholder | string | "Frag etwas …" | Platzhalter |
| value | string | "" | Vorbelegung |
| busy | boolean | false | Antwortet gerade (Stop-Knopf) |
| attachButton | boolean | true | Anhang-Knopf |
| modelLabel | string | "" | Modell-Anzeige (leer = aus) |
| hint | string | "Enter sendet · Umschalt+Enter für Zeile… | Hinweis unter dem Feld |
| maxWidth | string: none | md | lg | "none" | Lesebreite (passend zur Konversation) |
* Pflicht-Prop
Events & Slots
Events:
⚡ submit⚡ stop — im Surface per on: {<event>: {action, params}} verdrahtbar.
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 |
|---|---|
--prompt-input-action-disabled | var(--color-action-disabled) |
--prompt-input-action-on-disabled | var(--color-action-on-disabled) |
--prompt-input-action-on-primary | var(--color-action-on-primary) |
--prompt-input-action-primary | var(--color-action-primary) |
--prompt-input-action-primary-hover | var(--color-action-primary-hover) |
--prompt-input-form-background | var(--form-background) |
--prompt-input-form-border | var(--form-border) |
--prompt-input-form-border-focus | var(--form-border-focus) |
--prompt-input-form-placeholder | var(--form-placeholder) |
--prompt-input-radius-control | var(--radius-control) |
--prompt-input-radius-full | var(--radius-full) |
--prompt-input-radius-surface | var(--radius-surface) |
--prompt-input-status-danger | var(--color-status-danger) |
--prompt-input-surface-sunken | var(--color-surface-sunken) |
--prompt-input-text-default | var(--color-text-default) |
--prompt-input-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.disabledcolor.action.on-disabledcolor.action.on-primarycolor.action.primarycolor.action.primary-hovercolor.status.dangercolor.surface.sunkencolor.text.defaultcolor.text.mutedcontainer.lgcontainer.mdfont.family.defaultform.backgroundform.borderform.border-focusform.placeholderleading.baseradius.controlradius.fullradius.surfacesize.1size.2size.3size.32size.8text.mdtext.xs