Composer
提示词输入框:随内容增高,之后滚动;回复流式输出时,发送按钮变为停止。
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";属性
actionsReactNode按钮行开头的控件:参数、清空。
aria-labelstring文本框的无障碍名称(默认为“提示词”)。
autoFocusboolean出现时让输入区获得焦点。
clearOnSubmitboolean = true发送后清空非受控的输入框(默认开启)。
defaultValuestring首次渲染时的消息。
disabledboolean = false将其禁用:无法使用,并显示为变暗。
loadingboolean = false提示词正在发送:发送按钮显示加载指示。
maxRowsnumber = 10文本框开始滚动前的行数(默认 10)。
namestring在表单中提交值时使用的字段名。
onStop(() => void)停止:
streaming时显示的按钮。onSubmit((value: string) => void)发送:点击发送按钮、在文本框中按 Enter(见
submitOn)或 ⌘ Enter(Ctrl Enter)。提示词为空或只有空格、处于禁用、发送中或流式输出中,以及输入法正在组字时不会调用。onValueChange((value: string) => void)输入时调用,并传入消息。
placeholderstring没有值时显示的文字。
size"md" | "sm" = md输入区的高度。
stopLabelstring停止按钮的无障碍名称,在回复流式输出时显示。
streamingboolean = false回复正在输出:发送按钮变为停止。文本框仍可编辑,以便输入下一条提示词。
submitLabelstring发送按钮的无障碍名称。
submitOn"enter" | "mod-enter" = enter在文本框中发送的按键。
"enter"(默认):Enter 发送,Shift Enter 换行;在触摸屏上 Enter 换行,由发送按钮发送。"mod-enter":Enter 换行,只有 ⌘ Enter(Ctrl Enter)发送。两种模式下 ⌘ Enter 和 Ctrl Enter 都会发送。valuestring受控时正在撰写的消息。