Component
ConversationList
Một danh sách cuộc trò chuyện có tên, như cột cạnh khung chat: mỗi hàng dẫn tới một cuộc, với avatar, tên, thời gian và tin cuối, và số tin chưa đọc. Cuộc trò chuyện đang mở dùng nền accent dịu.
Xem trước
import { Avatar } from "@/components/ui/avatar"
import { ConversationList, ConversationListItem } from "@/components/ui/conversation-list"
import { GroupAvatar } from "@/components/ui/group-avatar"
const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]
const conversationLabelsVi = { unread: (count?: number) => (count === undefined ? "Chưa đọc" : `${count} tin chưa đọc`), typing: "Đang soạn tin" }
<ConversationList label="Cuộc trò chuyện" labels={conversationLabelsVi} className="w-80 max-w-full">
<ConversationListItem active href="#linh" title="Linh Tran" preview="Nhận rồi, cảm ơn nhé!" time="10:44" avatar={<Avatar alt="" color="blue" size="lg">LT</Avatar>} />
<ConversationListItem href="#design" title="Nhóm thiết kế" preview="Minh: Bộ icon mới đã có rồi." time="09:12" unread={3} avatar={<GroupAvatar alt="" size="lg" members={designTeam} />} />
<ConversationListItem href="#an" title="An Pham" preview="Hẹn gặp thứ Hai." time="T2" avatar={<Avatar alt="" color="green" size="lg">AP</Avatar>} />
</ConversationList>Cách dùng
Khi nào dùng
- Liệt kê các cuộc trò chuyện cạnh khung chat, với tin cuối, thời gian và số tin chưa đọc.
- Chuyển giữa các cuộc chat cũ với trợ lý.
Khi nào không dùng
- Điều hướng chính của ứng dụng. Dùng Sidebar.
- Một danh sách người để chọn. Dùng Combobox.
- Các hàng dữ liệu có cột. Dùng Table.
Ví dụ
Hộp thư
import { Avatar } from "@/components/ui/avatar"
import { ConversationList, ConversationListItem } from "@/components/ui/conversation-list"
import { GroupAvatar } from "@/components/ui/group-avatar"
const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]
<ConversationList label="Cuộc trò chuyện" className="w-80 max-w-full">
<ConversationListItem active href="#linh" title="Linh Tran" preview="Nhận rồi, cảm ơn nhé!" time="10:44" avatar={<Avatar alt="" color="blue" size="lg">LT</Avatar>} />
<ConversationListItem href="#design" title="Nhóm thiết kế" preview="Minh: Bộ icon mới đã có rồi." typing="Minh đang soạn tin" time="09:12" unread={3} avatar={<GroupAvatar alt="" size="lg" members={designTeam} />} />
<ConversationListItem href="#an" title="An Pham" preview="Hẹn gặp thứ Hai." time="T2" avatar={<Avatar alt="" color="green" size="lg">AP</Avatar>} />
</ConversationList>Không có avatar
Hàng không có avatar hợp với danh sách chủ đề hoặc các cuộc chat với trợ lý. unread là true hiện một chấm.
import { ConversationList, ConversationListItem } from "@/components/ui/conversation-list"
<ConversationList label="Cuộc chat" className="w-72 max-w-full">
<ConversationListItem active title="Tóm tắt báo cáo quý" preview="Doanh số tăng ở hai trong ba khu vực." time="Hôm nay" />
<ConversationListItem unread title="Bản nháp email chào mừng" preview="Đây là một bản ngắn hơn." time="Hôm qua" />
<ConversationListItem title="SQL tính tỷ lệ rời bỏ theo gói" preview="Truy vấn gom tài khoản theo gói." time="20 thg 10" />
</ConversationList>Nên và không nên
Nên
- Giữ danh sách trong cột riêng cạnh MessageList, hoặc trong Sheet trên điện thoại.
- Hiện tin cuối và thời gian của nó, để người đọc chọn cuộc trò chuyện mà không cần mở.
- Đánh dấu cuộc trò chuyện đang mở bằng active.
Không nên
- Đừng dùng cho điều hướng của site hay ứng dụng; dùng Sidebar.
- Đừng hiện số 0; bỏ unread khi các tin đã được đọc.
- Đừng đặt nút trong một hàng; cả hàng là một liên kết.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| label bắt buộc | string | - | - | Trên ConversationList: tên của landmark điều hướng, như Cuộc trò chuyện. |
| title bắt buộc | node | - | - | Trên ConversationListItem: người, nhóm hoặc agent, như Linh Tran. |
| preview | node | - | - | Tin cuối, trên một dòng. |
| time | node | - | - | Lúc tin cuối tới, như được hiện, như 10:42 hoặc T2. |
| dateTime | string | - | - | Thời gian dạng máy đọc, như 2026-10-23T10:42. |
| avatar | node | - | - | Một Avatar ở đầu, hoặc GroupAvatar cho một nhóm. Truyền alt="" khi title đã nêu tên cùng người hoặc nhóm đó. |
| unread | number | boolean | - | - | Số tin chưa đọc, hoặc true cho một chấm chưa đọc. 0 hoặc false: đã đọc. |
| typing | boolean | string | - | false | Có người đang soạn tin trong cuộc trò chuyện này: tin cuối nhường chỗ cho các chấm nhấp nháy và chữ, bằng màu chữ phụ. Một chuỗi thay cho chữ, như Linh đang soạn tin. |
| active | boolean | - | false | Cuộc trò chuyện đang mở: aria-current="page" và nền accent dịu. |
| href | string | - | - | Có nó thì hàng là liên kết; không có thì là nút. |
| asChild | boolean | - | false | Cho liên kết của router: class và nội dung của hàng chuyển sang phần tử con duy nhất. |
| labels | { unread?: (count: number | undefined) => string; typing?: string } | - | - | Trên ConversationList: chữ được đọc sau một hàng chưa đọc (count là undefined cho chấm) và hiện khi có người đang gõ. Mặc định: 3 unread messages, Unread, Typing. Tiếng Việt: 3 tin chưa đọc, Chưa đọc, Đang soạn tin. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | Landmark điều hướng. |
| list | ul chứa các hàng. |
| conversation | Một hàng: liên kết hoặc nút với avatar, rồi hai dòng. |
| avatar | Avatar tùy chọn, hoặc GroupAvatar cho nhóm, ở đầu. Cỡ lg hợp với hai dòng. |
| title | Người, nhóm hoặc agent, trên một dòng. Semibold khi chưa đọc. |
| time | Lúc tin cuối tới, ở cuối dòng đầu. |
| preview | Tin cuối trên một dòng, cắt bằng dấu ba chấm. Chữ chính khi chưa đọc. |
| typing | Khi có người đang gõ, ở chỗ tin cuối: ba chấm 4px nhấp nháy lần lượt theo duration-loop (đứng yên khi giảm chuyển động) và chữ, bằng màu chữ phụ. |
| unread | Số tin chưa đọc: một viên accent đặc (99+ khi trên 99), hoặc một chấm accent 8px cho unread=true. |
Khả năng truy cập
Role: navigation
| Phím | Hành động |
|---|---|
| Tab | Chuyển tới cuộc trò chuyện tiếp theo. |
| Enter | Mở cuộc trò chuyện đang có focus. |
- Một landmark điều hướng được đặt tên bằng label (EN `Conversations`, VI `Cuộc trò chuyện`), các hàng nằm trong một danh sách.
- Mỗi hàng là một liên kết (hoặc một nút khi không có href), nên tên của nó là mọi thứ nó hiện: tên, thời gian và tin cuối.
- Cuộc trò chuyện đang mở có aria-current="page".
- Số và chấm chưa đọc bị ẩn với trình đọc màn hình; hàng kết thúc bằng chữ từ labels.unread (EN `3 unread messages`, `Unread`). Hàng chưa đọc còn được phân biệt bằng độ đậm và màu chữ, không chỉ bằng viên accent.
- Truyền alt="" cho Avatar khi title đã nêu tên cùng người đó.
- Khi có người đang gõ, tên của hàng kết thúc bằng chữ đang soạn tin thay cho tin cuối; các chấm bị ẩn với trình đọc màn hình.
Cài đặt
npx werewolf-ui add conversation-listChạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.