Avatar động theo trạng thái: nâng cấp trải nghiệm chờ cho AI chatbot
Tóm tắt
Gắn trạng thái của avatar với vòng đời một lần gọi AI (chờ → đang xử lý → nghỉ) giúp người dùng hiểu agent đang làm gì và làm thời gian chờ bớt khó chịu. Video giới thiệu một bộ thư viện nhân vật có sẵn các trạng thái này.
Ý tưởng chính
| Trạng thái | Khi nào | Avatar thể hiện |
|---|---|---|
| Idle | Chờ người dùng nhập | Chuyển động nhẹ, sẵn sàng |
| Working | Đã nhận prompt, đang gọi API/xử lý | Chuyển động “đang làm việc” |
| Sleeping | Không hoạt động một thời gian | Trạng thái nghỉ, tiết kiệm tài nguyên |
Theo video, bộ thư viện có sẵn khoảng 18 nhân vật với các trạng thái trên để chọn cho hợp design system.
Áp dụng thế nào?
- Map trạng thái với code: khi gửi request → Working; khi stream xong hoặc lỗi → Idle; sau N phút không tương tác → Sleeping.
- Đừng chỉ trang trí: kết hợp avatar với thông tin tiến trình thật (đang tìm kiếm, đang đọc file…) để người dùng biết agent làm gì.
- Accessibility: tôn trọng
prefers-reduced-motionvà cung cấp text trạng thái cho trình đọc màn hình (aria-live).