Chatbot-Style FAQ Block for React

No, and the window says so. QUESTIONS holds six questions with a short label for the chip, the full question that's posted as your message and the answer that comes back, so every reply is text you wrote. There is no model, no free typing and no network request. To connect a real assistant, add a text field and replace ask with a call to it; keep the line that says what it is.

The transcript is a named log, role="log" with an accessible name, so each new message is announced politely as it's added: your question, then the typing indicator's "Looking through the FAQ", then the answer. The window keeps a fixed height and scrolls inside it; because it scrolls, it takes a Tab stop with a visible focus ring, so keyboard users can scroll it with the arrow keys.

You can ask the same chip again: it's posted as a new message and answered again. While a reply is on its way, extra clicks are ignored, so the answers never arrive out of order. THINKING sets the wait in milliseconds; with reduced motion the dots hold still but the wait stays.

It clears the transcript back to the greeting and returns focus to the first chip. It's disabled while the window is already empty.

Replies are muted bubbles with a small avatar; your messages are solid foreground bubbles. The primary colour isn't used: this block has no Shine Button, since the chips are the only actions. All of it follows your theme in light and dark.

The header stacks above the window and the chips wrap onto as many lines as they need. The transcript keeps its own height and scrolls inside it, so the page never grows as the conversation does, and nothing scrolls sideways at 320 pixels.