Giao Diện UI/UX & Khả Năng Tùy Biến Thương Hiệu

Pango Chatbot Widget được thiết kế theo các tiêu chuẩn thẩm mỹ của giao diện hiện đại: bảng màu sắc nét, hiệu ứng đổ bóng tinh tế, font chữ tối ưu hiển thị trên mọi độ phân giải và khả năng thích ứng hoàn hảo với nhận diện thương hiệu của từng đối tác doanh nghiệp.

1. Các Trạng Thái Giao Diện Cốt Lõi

1.1. Trạng Thái Khởi Tạo Hội Thoại Mới (New Chat State)

Khi người dùng mở widget lần đầu tiên hoặc bấm nút "Bắt đầu phiên chat mới", giao diện chuyển sang chế độ chào mừng thân thiện:

New Chat Screen

Lời Chào Cá Nhân Hóa (Greeting): Hiển thị câu chào mừng kèm tên người dùng hoặc tên thương hiệu.
Thẻ Gợi Ý Câu Hỏi (Prompt Chips): Danh sách các câu hỏi thường gặp nhất được hiển thị dưới dạng các thẻ bấm nhanh (ví dụ: "Tra cứu học phí", "Tìm cơ sở gần nhất", "Tư vấn khóa học IELTS"). Người dùng chỉ cần nhấp một chạm để gửi câu hỏi mà không cần gõ bàn phím.
Lịch Sử Đàm Thoại: Hỗ trợ xem lại các phiên hội thoại trước đó đã lưu trong phiên làm việc.

1.2. Trạng Thái Đàm Thoại Thời Gian Thực (Active Streaming)

Trong quá trình trao đổi:

Streaming Response: Câu trả lời của AI xuất hiện tức thời theo từng từ (Word-by-word streaming) thông qua kết nối Firebase Realtime Database hoặc WebSockets, mang lại cảm giác phản hồi tức thì và sống động.
Trình Kết Xuất Đa Năng: Tự động nhận diện và định dạng các bảng Markdown có hỗ trợ thanh cuộn ngang mượt mà, khối mã lập trình với nút sao chép nhanh và các liên kết điều hướng an toàn.

1.3. Trạng Thái Đánh Giá Chất Lượng Đàm Thoại (CSAT Rating)

Khi người dùng chuẩn bị kết thúc phiên chat hoặc khi Agent đề xuất khảo sát độ hài lòng:

Session Rating Modal

Xếp Hạng Số Sao / Cảm Xúc: Thang điểm 5 sao hoặc biểu tượng Thumbs Up / Thumbs Down để đo lường chỉ số CSAT (Customer Satisfaction Score).
Hộp Phản Hồi Ý Kiến: Cho phép người dùng để lại lời góp ý chi tiết về câu trả lời của AI.
Đồng Bộ Kiểm Toán: Toàn bộ điểm đánh giá được ghi nhận trực tiếp vào cơ sở dữ liệu kiểm toán của Pango AI và có thể truy xuất trên màn hình Feedback & Audit của Chatbot Admin.

2. Khả Năng Tùy Biến Nhận Diện Thương Hiệu (Branding)

Mỗi doanh nghiệp đều có thể yêu cầu Pango AI tùy biến giao diện widget theo Brand Guidelines:

Yếu Tố	Khả Năng Tùy Biến	Ví Dụ Doanh Nghiệp
Màu Sắc Chủ Đạo (Primary Color)	Đổi màu thanh Header, bong bóng chat của người dùng, nút gửi, icon launcher.	Đỏ VUS (`#c41230`), Xanh Caresoft (`#1a73e8`), Tím Pango (`#7C3AED`).
Logo & Avatar	Tùy chỉnh ảnh đại diện của trợ lý ảo và biểu tượng icon hiển thị trên launcher.	Logo linh vật V-Buddy (VUS), Icon Robot Trợ lý (CPS).
Font Chữ (Typography)	Nhúng các bộ font thương hiệu chuẩn mực.	Google Sans, Roboto, Inter, hoặc font riêng của doanh nghiệp.
Prompt Chips Mặc Định	Tùy biến bộ câu hỏi nhanh theo từng chuyên trang hoặc từng ngành hàng.	Tuyển sinh (VUS), Hỗ trợ kỹ thuật / Bán vé (Caresoft).
Bản Địa Hóa (Localization)	Chuyển đổi linh hoạt giữa Tiếng Việt và Tiếng Anh.	Tự động phát hiện qua `navigator.language`.

3. Trải Nghiệm Thích Ứng Đa Thiết Bị (Responsive Design)

Màn Hình Desktop & Tablet: Widget mở ra dưới dạng một bảng điều khiển nổi (Floating Panel) cố định ở góc phải hoặc trái, không che khuất vùng thao tác chính giữa màn hình của người dùng.
Màn Hình Mobile (< 768px): Widget tự động mở rộng bao phủ toàn bộ màn hình dưới dạng một trang đàm thoại chuyên biệt, tính toán chính xác chiều cao bàn phím ảo bằng đơn vị 100dvh (Dynamic Viewport Height) để ngăn chặn hiện tượng nhảy khung hình trên iOS Safari và Android Chrome.