Yugen UI

ChatComposer

ChatComposer là ô soạn tin tự giãn theo nội dung: Enter để gửi, Shift+Enter để xuống dòng, nút gửi chỉ bật khi có nội dung.

Có slot actions cho đính kèm / emoji / chọn model, bộ đếm ký tự, gợi ý phím, trạng thái busy với nút Dừng cho phản hồi AI. Không gửi khi bộ gõ tiếng Việt (Telex, VNI) hoặc IME còn đang ghép chữ. ref trỏ vào textarea.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản
Đã nhập 0/500 ký tự

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { ChatComposer } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Đang trả lời & nút Dừng

busy chặn gửi; có onStop thì nút gửi thành nút Dừng.

Gợi ý phím

showHint hiện “Enter để gửi · Shift+Enter xuống dòng” (ẩn trên màn hẹp).

Disabled

Giải thích lý do ngay trong placeholder hoặc bên cạnh.

Cách dùng

Nên
  • Đưa focus lại ô soạn sau khi gửi (component tự làm) để gõ tiếp liền mạch.
  • Dùng busy + onStop khi chờ AI để người dùng chủ động dừng câu trả lời dài.
Không nên
  • Không bắt Ctrl+Enter mới gửi trong chat thông thường — Enter là kỳ vọng mặc định.
  • Không bỏ tin gửi thất bại: ChatComposer xoá ô sau onSend, nên giữ tin trong danh sách với trạng thái lỗi và nút Thử lại.

Props

Prop · KiểuMặc địnhMô tả
onSend(text: string) => voidMặc định: —Nhận nội dung đã trim; ô soạn tự xoá.
value / defaultValue / onValueChangestringMặc định: —Controlled hoặc uncontrolled.
placeholder / labelstringMặc định: "Type a message…" / "Message"Placeholder và tên truy cập của textarea.
maxLength / showCountnumber / booleanMặc định: —Giới hạn ký tự và bộ đếm (đổi màu khi gần hết).
maxRowsnumberMặc định: 6Số dòng tối đa trước khi cuộn.
actionsReactNodeMặc định: —Nút ở đầu thanh công cụ.
busy / onStopboolean / () => voidMặc định: —Chặn gửi khi đang chờ; nút Dừng.
showHint / sendLabel / disabledboolean / string / booleanMặc định: false / "Send" / falseGợi ý phím, nhãn nút gửi, vô hiệu hoá.
textareaPropsTextareaHTMLAttributesMặc định: —Thuộc tính thêm cho textarea.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.messageBubble

Khoá · KiểuMặc định (tiếng Anh)messagesVi
sendingstring

Nhãn trạng thái gửi — cùng tên với MessageStatus.

Mặc định (tiếng Anh)"Sending"messagesVi"Đang gửi"
sentstringMặc định (tiếng Anh)"Sent"messagesVi"Đã gửi"
deliveredstringMặc định (tiếng Anh)"Delivered"messagesVi"Đã nhận"
readstringMặc định (tiếng Anh)"Seen"messagesVi"Đã xem"
errorstring

Lỗi gửi (khi không truyền errorMessage).

Mặc định (tiếng Anh)"Couldn't send."messagesVi"Không gửi được."
retrystringMặc định (tiếng Anh)"Retry"messagesVi"Thử lại"

messages.typingIndicator

Khoá · KiểuMặc định (tiếng Anh)messagesVi
label(author?: string) => string

Câu đọc cho trình đọc màn hình (khi không truyền label).

Mặc định (tiếng Anh)(author) => `${author ?? "Someone"} is typing…`messagesVi(author) => `${author ?? "Đối phương"} đang soạn tin…`

messages.chatComposer

Khoá · KiểuMặc định (tiếng Anh)messagesVi
placeholderstringMặc định (tiếng Anh)"Type a message…"messagesVi"Nhập tin nhắn…"
labelstring

Nhãn truy cập cho ô soạn.

Mặc định (tiếng Anh)"Message"messagesVi"Tin nhắn"
sendstring

Tên nút gửi.

Mặc định (tiếng Anh)"Send"messagesVi"Gửi"
stopstring

Tên nút dừng (khi busy + onStop).

Mặc định (tiếng Anh)"Stop responding"messagesVi"Dừng phản hồi"
hintstring

Gợi ý phím (showHint).

Mặc định (tiếng Anh)"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.

Mặc định (tiếng Anh)"Typed"messagesVi"Đã nhập"
countSuffixstringMặc định (tiếng Anh)"characters"messagesVi"ký tự"