Chat & AI interfaces

<MessageScroller
  className="h-[60vh]"
  onLoadOlder={loadOlder}      // reaching the top loads more and keeps the reading position
  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>

Every child needs a stable key (the message id). MessageScroller compares the first and last keys between renders to tell older messages inserted at the top from new messages added at the end.

• Show TypingIndicator right after sending, before the first token, so the user knows the request was received.
• When the first token arrives, replace TypingIndicator with a streaming MessageBubble in the same position.
• A blinking caret means more is coming; with reduced motion it stays still.
• Allow stopping: ChatComposer busy onStop. Keep the partial answer, with a “Stopped” note.

// 1. Sent, no tokens yet → TypingIndicator
{waiting && <TypingIndicator key="typing" author="Sakura Bot" />}

// 2. First token arrives → replace it with a streaming bubble (same position, no layout jump)
<MessageBubble key={answer.id} author="Sakura Bot" streaming={!answer.done}>
  {answer.text}
</MessageBubble>

// 3. Done → streaming={false}: the caret disappears and the live region reads the whole answer once
// While waiting: <ChatComposer busy onStop={abortController.abort} … />

• Keep the content of the failed message; the red border and message come with an icon, not just a color change.
• A “Thử lại” (Retry) button sits right under the message; the error message uses role=alert so it is read at once.
• AI errors (quota exceeded, content blocked) are a normal incoming message that explains why and what the user can do.
• A global connection loss gets one MessageBar above the list, not an error repeated on every message.

<div role="log" aria-label="Conversation" aria-live="off" tabIndex={0}>
  …messages…
</div>
{/* Separate announcement region: only receives complete incoming messages */}
<div aria-live="polite" aria-atomic="true" className="sr-only">Sakura Bot: Set data-brand…</div>

The message area has tabIndex=0 so keyboard users can scroll it, and a name (label). The send status is an icon with hidden text such as “Đã xem” (Seen), not just a color.

A Trace inside a message should use size="small", sit in a bubble with appearance="plain", and come before the answer. See also Process transparency with Trace.

• Reasoning comes before the answer: it is open while the model is thinking and collapses on its own with “Đã suy luận trong 12s” (Reasoned for 12s).
• StreamingMarkdown takes a growing string: no stray ** or unfinished fences, finished blocks are not re-rendered, and links are limited to http / https / mailto. Inside MessageBubble streaming, set caret={false}.
• [1] in the Markdown plus citations becomes a Citation chip; CitationList lists the sources below.
• PromptInput replaces ChatComposer when you need attachments (button, drag and drop, pasted images), a model picker and a Stop button.