Composer

Das Prompt-Feld: wächst mit dem Text, scrollt dann; Senden wird zu Stopp, solange eine Antwort einläuft.

function Basic() {
  const [streaming, setStreaming] = useState(false);
  return (
    <Composer
      className="w-full max-w-640"
      streaming={streaming}
      onSubmit={() => {
        setStreaming(true);
        setTimeout(() => setStreaming(false), 2400);
      }}
      onStop={() => setStreaming(false)}
    />
  );
}

import { Composer } from "@logicplanes/kaeso-ui/playground";

Props

actions
ReactNode
Steuerelemente am Anfang der Button-Zeile: Parameter, Leeren.
aria-label
string
Der zugängliche Name des Textfelds (standardmäßig „Prompt“).
autoFocus
boolean
Fokussiert den Composer, sobald er erscheint.
clearOnSubmit
boolean = true
Leert einen unkontrollierten Composer nach dem Senden (standardmäßig an).
defaultValue
string
Die Nachricht beim ersten Rendern.
disabled
boolean = false
Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
loading
boolean = false
Der Prompt wird gesendet: Senden zeigt einen Spinner.
maxRows
number = 10
Zeilen, bevor das Textfeld scrollt (standardmäßig 10).
name
string
Der Feldname, unter dem der Wert mit einem Formular gesendet wird.
onStop
(() => void)
Stopp: der Button während streaming.
onSubmit
((value: string) => void)
Senden: der Senden-Button, Enter im Textfeld (siehe submitOn) oder ⌘ Enter (Strg Enter). Wird nicht aufgerufen bei leerem Prompt oder nur Leerzeichen, wenn deaktiviert, beim Senden oder Streamen oder während eine Eingabemethode Zeichen zusammensetzt.
onValueChange
((value: string) => void)
Wird beim Tippen mit der Nachricht aufgerufen.
placeholder
string
Text, der angezeigt wird, solange es keinen Wert gibt.
size
"md" | "sm" = md
Die Höhe des Composers.
stopLabel
string
Der zugängliche Name des Stopp-Buttons, der erscheint, während eine Antwort gestreamt wird.
streaming
boolean = false
Eine Antwort läuft ein: Senden wird zu Stopp. Das Textfeld bleibt für den nächsten Prompt bearbeitbar.
submitLabel
string
Der zugängliche Name des Senden-Buttons.
submitOn
"enter" | "mod-enter" = enter
Die Taste, die aus dem Textfeld sendet. "enter" (Standard): Enter sendet, Umschalt Enter fügt eine Zeile ein; auf Touchscreens fügt Enter eine Zeile ein und der Senden-Button sendet. "mod-enter": Enter fügt eine Zeile ein, nur ⌘ Enter (Strg Enter) sendet. ⌘ Enter und Strg Enter senden in beiden Fällen.
value
string
Die Nachricht, die gerade geschrieben wird, bei gesteuertem Wert.