Chat
ChatComposer is an auto-growing message box: Enter sends, Shift+Enter adds a new line, and Send is enabled only when there's content.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { ChatComposer } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Responding & Stop button
busy blocks sending; with onStop, the Send button becomes a Stop button.
Key hint
showHint shows “Enter to send · Shift+Enter for a new line”, hidden on narrow screens.
Disabled
Explain why in the placeholder or next to the composer.
Usage
- Return focus to the composer after sending (the component does this) so people can keep typing.
- Use busy + onStop while waiting for the AI so people can stop a long answer.
- Don't require Ctrl+Enter to send in regular chat. People expect Enter.
- Don't drop a message that failed to send: ChatComposer clears after onSend, so keep the message in the list with an error status and a Retry button.
Props
| Prop · Type | Default | Description |
|---|---|---|
| onSend(text: string) => void | Default: — | Receives the trimmed text; the composer clears itself. |
| value / defaultValue / onValueChangestring | Default: — | Controlled or uncontrolled. |
| placeholder / labelstring | Default: "Type a message…" / "Message" | Placeholder and the textarea's accessible name. |
| maxLength / showCountnumber / boolean | Default: — | Character limit and counter (changes color near the limit). |
| maxRowsnumber | Default: 6 | Maximum rows before scrolling. |
| actionsReactNode | Default: — | Buttons at the start of the toolbar. |
| busy / onStopboolean / () => void | Default: — | Blocks sending while waiting; Stop button. |
| showHint / sendLabel / disabledboolean / string / boolean | Default: false / "Send" / false | Key hint, Send button label, disabled. |
| textareaPropsTextareaHTMLAttributes | Default: — | Extra attributes for the textarea. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.messageBubble
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| sendingstring Nhãn trạng thái gửi — cùng tên với | Default (English)"Sending" | messagesVi"Đang gửi" |
| sentstring | Default (English)"Sent" | messagesVi"Đã gửi" |
| deliveredstring | Default (English)"Delivered" | messagesVi"Đã nhận" |
| readstring | Default (English)"Seen" | messagesVi"Đã xem" |
| errorstring Lỗi gửi (khi không truyền | Default (English)"Couldn't send." | messagesVi"Không gửi được." |
| retrystring | Default (English)"Retry" | messagesVi"Thử lại" |
messages.typingIndicator
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| label(author?: string) => string Câu đọc cho trình đọc màn hình (khi không truyền | Default (English)(author) => `${author ?? "Someone"} is typing…` | messagesVi(author) => `${author ?? "Đối phương"} đang soạn tin…` |
messages.chatComposer
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| placeholderstring | Default (English)"Type a message…" | messagesVi"Nhập tin nhắn…" |
| labelstring Nhãn truy cập cho ô soạn. | Default (English)"Message" | messagesVi"Tin nhắn" |
| sendstring Tên nút gửi. | Default (English)"Send" | messagesVi"Gửi" |
| stopstring Tên nút dừng (khi busy + onStop). | Default (English)"Stop responding" | messagesVi"Dừng phản hồi" |
| hintstring Gợi ý phím (showHint). | Default (English)"Enter to send · Shift+Enter for a new line" | messagesVi"Enter để gửi · Shift+Enter xuống dòng" |
| countPrefixstring Chữ ẩn trước / sau bộ đếm "12/100", cho trình đọc màn hình. | Default (English)"Typed" | messagesVi"Đã nhập" |
| countSuffixstring | Default (English)"characters" | messagesVi"ký tự" |