Concept: Hybrid AI Search & Tutor Experience

Status: Concept | Author: UX Architect | Date: 2026-01-22

1. Purpose & Core Idea

Kiến trúc này nhằm tối ưu hóa sự cân bằng giữa Efficiency (Hiệu suất tìm kiếm) và Relationship (Kết nối với trợ lý học tập). Thay vì ép người dùng vào một khung chat ngay từ đầu, chúng ta cung cấp thông tin “vừa đủ” (Inline) và chỉ mở rộng sang “hỗ trợ sâu” (Portal) khi người dùng có nhu cầu thực sự.

2. Interaction Entities

2.1. Inline AI Snapshot (Level 1)

Là một vùng hiển thị thông minh nằm trong Search Palette, thay thế cho danh sách kết quả.

• Trigger: Chọn một hành động có hậu tố (AI) trong danh sách gợi ý.
• UI Structure:
  • Header: Icon Sparkles + Title của Insight (e.g., “Tổng quan tiến độ tuần này”).
  • Body:
    • Highlight Paragraph: Tóm tắt ngắn gọn trạng thái học tập.
    • Visual Widget: Biểu đồ hình tròn hoặc thanh tiến độ.
    • Achievement Chip: “Bạn đã hoàn thành 80% mục tiêu”.
  • Footer: Nút hành động chính “Tiếp tục hội thoại với AI Tutor” (Màu Wave Blue).

2.2. Floating AI Tutor Portal (Level 2)

Là một chatbot portal xuất hiện ở góc dưới bên phải màn hình.

• Trigger:
  • Nhấn từ nút “Hỏi thêm” trong Palette.
  • Nhấn “Hỏi AI” khi Search không có kết quả phù hợp.
• Behavior:
  • Palette Closing: Search Palette đóng lại ngay lập tức (onClose) để giải phóng không gian.
  • Slide-in Animation: Chatbot trượt lên từ góc phải.
  • Automatic Context: Chatbot tự động gửi tin nhắn chào mừng kèm theo context từ Search (e.g., “Tôi thấy bạn đang quan tâm đến kết quả bài viết IELTS Task 1, tôi có thể giải thích chi tiết hơn về các lỗi sai của bạn…“).

3. Theoretical Grounding (UX Principles)

• Cognitive Load Reduction: Không làm người dùng choáng ngợp với giao diện chat phức tạp ngay khi mới search. Snapshot cung cấp thông tin “At-a-glance”.
• Progressive Disclosure: Chỉ hiển thị giao diện chat chuyên sâu khi người dùng yêu cầu (Level 2).
• Contextual Continuity: Trải nghiệm không bị đứt gãy nhờ việc chuyển giao payload dữ liệu từ Search sang Portal.

4. UI States & Transitions

State A: Quick Search List

• Giao diện tìm kiếm chuẩn.
• Gợi ý các lệnh AI: Dịch câu này (AI), Giải thích ngữ pháp (AI), Xem báo cáo học tập (AI).

State B: Inline Insight (Snapshot)

• Palette trượt nhẹ để thay đổi chiều cao phù hợp với widget.
• Sử dụng màu Wave Blue Matte làm nền cho vùng AI để phân biệt với kết quả thường.

State C: Portal Active

• Palette: opacity-0, pointer-events-none.
• Portal: scale-100, bottom-8, right-8.

5. Metadata & Tech Requirements

• Payload: Đối tượng AIContext { query, initialResponse, entities }.
• Transitions: CSS Transitions cho việc đóng/mở portal để tạo cảm giác “portal được kích hoạt từ thanh search”.