Prompt
PromptInput là ô soạn prompt đầy đủ cho trợ lý AI: tự giãn, đính kèm bằng nút / kéo thả / dán ảnh, kiểm tra tệp ngay tại chỗ và nút Gửi đổi thành Dừng khi model đang trả lời.
Tệp hiện thành chip có icon theo loại, dung lượng và ảnh thu nhỏ (URL.createObjectURL, thu hồi khi gỡ / unmount). accept, maxFiles, maxSize kiểm tra trước khi thêm, lỗi hiện inline (role=alert). Enter gửi, Shift+Enter xuống dòng, không gửi khi bộ gõ đang ghép chữ (Telex, IME). onSubmit nhận { text, files }; trả false để giữ nội dung. ChatComposer vẫn là lựa chọn gọn cho chat thuần chữ.
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
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 { PromptInput, validateFiles, formatFileSize } 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.
Chỉ chữ, có gợi ý phím
Vô hiệu hoá
Cách dùng
Nên
- Khai báo accept / maxSize trùng với giới hạn của server để báo lỗi sớm.
- Đặt chọn model, công cụ vào toolbar — gần nút Gửi.
- Cho phép Dừng (onStop) khi câu trả lời dài.
Không nên
- Không xoá nội dung khi gửi thất bại — trả false từ onSubmit.
- Không gửi khi Enter đang xác nhận chữ của bộ gõ.
- Không giấu lý do tệp bị từ chối.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| onSubmit({ text, files }) => void | boolean | Mặc định: — | Gửi; false giữ nội dung. |
| value / defaultValue / onValueChangestring | Mặc định: — | Nội dung (controlled / uncontrolled). |
| files / defaultFiles / onFilesChangeFile[] | Mặc định: — | Tệp đính kèm. |
| accept / maxFiles / maxSizestring / number / number (byte) | Mặc định: — | Kiểm tra tệp; onFilesRejected nhận lý do. |
| streaming / onStopboolean / () => void | Mặc định: — | Chặn gửi; nút Dừng. |
| toolbarReactNode | Mặc định: — | Slot sau nút đính kèm. |
| allowAttachmentsboolean | Mặc định: true | Nút đính kèm, kéo thả, dán tệp. |
| maxRows / showHint / disablednumber / boolean / boolean | Mặc định: 8 / false / false | Giãn tối đa, gợi ý phím, vô hiệu hoá. |
| placeholder / label / sendLabel / stopLabelstring | Mặc định: — | Nhãn hiển thị và nhãn truy cập. |
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.promptInput
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| placeholderstring | Mặc định (tiếng Anh)"Ask anything…" | messagesVi"Hỏi bất cứ điều gì…" |
| labelstring Nhãn truy cập cho ô soạn. | Mặc định (tiếng Anh)"Enter a prompt" | messagesVi"Nhập yêu cầu" |
| sendstring Tên nút gửi / dừng. | Mặc định (tiếng Anh)"Send" | messagesVi"Gửi" |
| stopstring | Mặc định (tiếng Anh)"Stop responding" | messagesVi"Dừng phản hồi" |
| attachstring Tên nút đính kèm. | Mặc định (tiếng Anh)"Attach files" | messagesVi"Đính kèm tệp" |
| attachmentsstring Tên danh sách tệp đã đính kèm. | Mặc định (tiếng Anh)"Attachments" | messagesVi"Tệp đính kèm" |
| remove(fileName: string) => string Tên nút gỡ một tệp. | Mặc định (tiếng Anh)(fileName) => `Remove ${fileName}` | messagesVi(fileName) => `Gỡ ${fileName}` |
| 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" |
| dropzonestring Lớp phủ khi kéo tệp vào. | Mặc định (tiếng Anh)"Drop files to attach" | messagesVi"Thả tệp để đính kèm" |
| attachedOne(fileName: string) => string Đọc qua live region sau khi đính kèm / gỡ tệp. | Mặc định (tiếng Anh)(fileName) => `Attached ${fileName}` | messagesVi(fileName) => `Đã đính kèm ${fileName}` |
| attachedMany(count: number) => string | Mặc định (tiếng Anh)(count) => (count === 1 ? "Attached 1 file" : `Attached ${count} files`) | messagesVi(count) => `Đã đính kèm ${count} tệp` |
| removed(fileName: string) => string | Mặc định (tiếng Anh)(fileName) => `Removed ${fileName}` | messagesVi(fileName) => `Đã gỡ ${fileName}` |
| duplicate(fileName: string) => string Lỗi kiểm tra tệp (validateFiles). | Mặc định (tiếng Anh)(fileName) => `“${fileName}” is already attached.` | messagesVi(fileName) => `“${fileName}” đã được đính kèm.` |
| invalidType(fileName: string) => string | Mặc định (tiếng Anh)(fileName) => `“${fileName}” isn't an allowed file type.` | messagesVi(fileName) => `“${fileName}” không đúng định dạng cho phép.` |
| tooLarge(fileName: string, maxSize: string) => string | Mặc định (tiếng Anh)(fileName, maxSize) => `“${fileName}” is larger than ${maxSize}.` | messagesVi(fileName, maxSize) => `“${fileName}” vượt quá ${maxSize}.` |
| tooMany(maxFiles: number) => string | Mặc định (tiếng Anh)(maxFiles) => (maxFiles === 1 ? "You can attach only 1 file." : `You can attach up to ${maxFiles} files.`) | messagesVi(maxFiles) => `Chỉ đính kèm tối đa ${maxFiles} tệp.` |