Giao diện chat streaming với Next.js

Các ứng dụng AI thường hiển thị câu trả lời chảy dần ra thay vì hiện một lúc. Tôi tò mò cách làm phần này ở phía giao diện nên quyết định tự dựng lại.

Đây thuần là bài tập Front-end, tập trung vào trải nghiệm người dùng khi chờ mô hình trả lời.

Tôi dùng cơ chế streaming để nhận dữ liệu theo từng phần và cập nhật giao diện ngay khi có, kèm trạng thái đang gõ và xử lý khi kết nối bị ngắt giữa chừng.

Chú ý tới cảm giác chờ

Tôi dành thời gian cho những chi tiết nhỏ: con trỏ nhấp nháy, cuộn mượt, và nút dừng khi câu trả lời quá dài. Chúng làm trải nghiệm dễ chịu hơn hẳn.

Kết quả là một giao diện chat gọn, phản hồi mượt, mà tôi có thể tái sử dụng làm nền cho các dự án AI khác.

Tôi hiểu rõ hơn rằng phần lớn cảm giác "thông minh" của một sản phẩm AI đến từ những chi tiết trải nghiệm rất đời thường.