PromptInput
The full chat composer: textarea, attachments, tools, model select, speech and submit with status.
import { PromptInput } from "@cynco-labs/ui/ai";Example
import { PlusIcon } from "@phosphor-icons/react";
import {
PromptInput,
PromptInputBody,
PromptInputButton,
PromptInputFooter,
PromptInputSubmit,
PromptInputTextarea,
PromptInputTools,
} from "@cynco-labs/ui/ai";
export default function PromptInputDemo() {
return (
<div className="max-w-[560px]">
<PromptInput onSubmit={() => {}}>
<PromptInputBody>
<PromptInputTextarea placeholder="Ask Cynco to record, find or explain anything…" />
</PromptInputBody>
<PromptInputFooter>
<PromptInputTools>
<PromptInputButton aria-label="Add attachment">
<PlusIcon size={14} />
</PromptInputButton>
</PromptInputTools>
<PromptInputSubmit status="ready" />
</PromptInputFooter>
</PromptInput>
</div>
);
}Use
The main chat input.
Props
onSubmit(message), accept, multiple, maxFiles; PromptInputBody › PromptInputTextarea; PromptInputFooter › PromptInputTools (buttons, PromptInputActionMenu, PromptInputSelect, PromptInputSpeechButton) + PromptInputSubmit status; optional PromptInputProvider to control it from outside.