MessageBubble
Mẫu chuẩnMột tin nhắn trong hội thoại: bong bóng chứa nội dung, avatar và dòng meta. Có ba biến thể theo phía: other (khách), self (bạn gửi tay), assistant (Human AI, trong overlay Nexi). Không báo giá trị.
Playground
Đổi phía để xem hướng, nền bong bóng và dòng meta đổi theo, và assistant bọc trong overlay Nexi.
Phía hiện tại: "other".
import { MessageBubble, MessageDateLabel } from "@nexobox/ui";
<MessageDateLabel>Hôm nay</MessageDateLabel>
<MessageBubble
side="other"
author={{ name: "Chị Lan", initials: "L" }}
time="10:20"
meta="Facebook"
>
Mình muốn mua 2 áo Linen size M ạ
</MessageBubble>Bài toán
Người quản lý đọc một hội thoại giữa khách, Human AI và chính họ, và phải phân biệt được ngay tin nào do ai gửi. Đó là việc tiếp quản hội thoại cần. Avatar cho mặt người gửi, nhưng không cho hướng, màu nền theo phía, hay dòng meta. Nếu phân biệt chỉ bằng màu thì vi phạm WCAG 1.4.1, nên dòng meta phải nói bằng chữ.
Khi nào sử dụng
Nên dùng
Hiển thị một tin trong luồng hội thoại. Dải ngày (dateLabel) chia luồng theo ngày.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Thông báo hệ thống trong luồng ("Bạn đã tiếp quản hội thoại") | Alert gọn, hoặc dòng chữ giữa luồng do host vẽ |
| Bình luận trong tài liệu | Không thuộc tầng này |
| Ô soạn tin | Composer |
Dựng từ
| Primitive tầng 1 | Vai trong composite |
|---|---|
Avatar (size="sm"), AvatarFallback | Người gửi. |
| MessageBubble thêm gì |
|---|
| Hướng và nền theo phía |
| Dòng meta bằng chữ: người gửi, giờ, và cách gửi ("gửi thủ công") |
Phía assistant bọc trong data-nexi-v2 |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Dải ngày | MessageDateLabel, caption, text-muted, căn giữa. Tuỳ chọn, do host đặt. |
| 2 | Avatar | size="sm". other ở trái; self và assistant ở phải. |
| 3 | Bong bóng | Nội dung tin. Nền và màu chữ đổi theo phía. |
| 4 | Dòng meta | Tên, giờ, và cách gửi. text-muted, căn theo phía. Chữ, không chỉ màu. |
Variants
| Phía | Căn | Nền bong bóng | Chữ |
|---|---|---|---|
other | trái | surface-subtle | text-primary |
self | phải | brand-soft | brand-on-soft |
assistant | phải | brand-soft trong [data-nexi-v2] | brand-on-soft trong [data-nexi-v2] |
States
Một trạng thái hiển thị. Không nhận tương tác. Nội dung có liên kết thì liên kết tự nhận tiêu điểm.
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không gửi, không sửa, không định dạng giờ.
| Host sở hữu | Cấp qua |
|---|---|
| Nội dung, người gửi, giờ đã định dạng, phía | children, author, time, side |
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| side | — | "other" | "self" | "assistant". Bắt buộc. |
| author | — | Bắt buộc. { name; initials; imageSrc? }. |
| time | — | Bắt buộc. |
| meta | undefined | Ví dụ "gửi thủ công", tên kênh. |
| children | — | Bắt buộc. Nội dung tin. |
Dải ngày là một export phụ MessageDateLabel với children.
Design tokens
--nf-semantic-surface-subtle, --nf-semantic-brand-soft, --nf-semantic-brand-on-soft, --nf-semantic-text-primary, --nf-semantic-text-muted, --nf-foundation-radius-card, --nf-foundation-typography-body-*, --nf-foundation-typography-caption-*, --nf-foundation-space-1, --nf-foundation-space-2, --nf-foundation-space-3, --nf-foundation-layout-reading (bề rộng tối đa của bong bóng).
Do / Don't
Nên dùng
side="assistant" cho tin do Human AI soạn. meta nói cách gửi: "gửi thủ công". Tên biến thể theo phía.
Tránh dùng
Dùng self cho tin của Human AI: người đọc không phân biệt được ai đã gửi. Chỉ phân biệt phía bằng màu. Thêm biến thể crew, sale: đó là từ vựng sản phẩm.