Giao diện hội thoại & AI

<MessageScroller
  className="h-[60vh]"
  onLoadOlder={loadOlder}      // chạm đầu danh sách → tải thêm, giữ nguyên vị trí đọc
  hasOlder={cursor !== null}
  loadingOlder={isLoading}
>
  {messages.map((m) => (
    <MessageBubble key={m.id} side={m.mine ? "outgoing" : "incoming"} author={m.author} time={m.time}>
      {m.text}
    </MessageBubble>
  ))}
</MessageScroller>

Mỗi phần tử con cần key ổn định (id tin nhắn): MessageScroller so sánh key đầu / cuối giữa các lần render để phân biệt tin cũ được chèn lên đầu với tin mới thêm vào cuối.

• Hiện TypingIndicator ngay sau khi gửi — trước token đầu tiên — để người dùng biết yêu cầu đã được nhận.
• Token đầu tiên về: thay TypingIndicator bằng MessageBubble streaming ở đúng vị trí đó.
• Con trỏ nhấp nháy báo “còn tiếp”; ở chế độ giảm chuyển động nó đứng yên.
• Cho phép dừng: ChatComposer busy onStop. Câu trả lời dở dang vẫn giữ lại, kèm ghi chú “Đã dừng”.

// 1. Đã gửi, chưa có token nào → TypingIndicator
{waiting && <TypingIndicator key="typing" author="Sakura Bot" />}

// 2. Token đầu tiên về → thay bằng bong bóng streaming (cùng vị trí, không nhảy bố cục)
<MessageBubble key={answer.id} author="Sakura Bot" streaming={!answer.done}>
  {answer.text}
</MessageBubble>

// 3. Xong → streaming={false}: con trỏ biến mất, live region đọc toàn bộ câu trả lời một lần
// Trong lúc chờ: <ChatComposer busy onStop={abortController.abort} … />

• Giữ nguyên nội dung tin lỗi; viền và thông báo đỏ kèm icon — không chỉ đổi màu.
• Nút “Thử lại” ngay dưới tin; thông báo lỗi dùng role=alert để được đọc ngay.
• Lỗi của AI (hết hạn mức, bị chặn nội dung) là một tin đến bình thường, giải thích lý do và việc có thể làm.
• Mất kết nối toàn cục → MessageBar phía trên danh sách, không lặp lỗi trên từng tin.

<div role="log" aria-label="Cuộc trò chuyện" aria-live="off" tabIndex={0}>
  …tin nhắn…
</div>
{/* Vùng đọc riêng: chỉ nhận tin đến đã hoàn chỉnh */}
<div aria-live="polite" aria-atomic="true" className="sr-only">Sakura Bot: Đặt data-brand…</div>

Vùng tin có tabIndex=0 để người dùng bàn phím cuộn được, và có tên (label). Trạng thái gửi là icon kèm chữ ẩn (“Đã xem”), không chỉ là màu.

Trace trong tin nhắn nên ở size="small", dùng appearance="plain" cho bong bóng chứa nó, và đặt trước câu trả lời. Xem thêm trang Minh bạch tiến trình với Trace.

• Reasoning đứng trước câu trả lời: mở khi model đang suy nghĩ, tự thu lại kèm “Đã suy luận trong 12s”.
• StreamingMarkdown nhận chuỗi đang dài dần: không lộ ** hay fence dở dang, khối đã xong không render lại, link chỉ http / https / mailto. Trong MessageBubble streaming đặt caret={false}.
• [1] trong Markdown + citations thành chip Citation; CitationList liệt kê nguồn bên dưới.
• PromptInput thay ChatComposer khi cần đính kèm (nút, kéo thả, dán ảnh), chọn model và nút Dừng.