Composer

The prompt box: grows with what is written, then scrolls; Send, which becomes Stop while a response streams.

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
Controls at the start of the button row: parameters, clear.
aria-label
string
The text box's accessible name ("Prompt" by default).
autoFocus
boolean
Focuses the composer when it appears.
clearOnSubmit
boolean = true
Clears an uncontrolled composer after Send (true by default).
defaultValue
string
The message on first render.
disabled
boolean = false
Turns it off: it can't be used, and it looks dimmed.
loading
boolean = false
The prompt is being sent: Send shows a spinner.
maxRows
number = 10
Lines before the text box scrolls (10 by default).
name
string
The field name the value is sent under in a form.
onStop
(() => void)
Stop: the button while streaming.
onSubmit
((value: string) => void)
Send: the Send button, Enter in the text box (see submitOn), or ⌘ Enter (Ctrl Enter). Not called for a prompt that is empty or only spaces, while disabled, sending or streaming, or while an input method is composing.
onValueChange
((value: string) => void)
Called with the message as it is typed.
placeholder
string
Text shown while there is no value.
size
"md" | "sm" = md
The composer's height.
stopLabel
string
The stop button's accessible name, shown while a reply streams.
streaming
boolean = false
A response is arriving: Send becomes Stop. The text box stays editable for the next prompt.
submitLabel
string
The send button's accessible name.
submitOn
"enter" | "mod-enter" = enter
The key that sends from the text box. "enter" (default): Enter sends and Shift Enter adds a line; on a touch screen Enter adds a line and the Send button sends. "mod-enter": Enter adds a line and only ⌘ Enter (Ctrl Enter) sends. ⌘ Enter and Ctrl Enter send with either.
value
string
The message being written, when you control it.