AI Assistant Introduction Onboarding Block for React

So you can see it without a click. On load the popover is a copy drawn in place above the launcher: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The launcher opens the real Popover, non-modal, with Escape and focus returning to the launcher, and the copy stays closed until a reload. Both show the same AssistantBody component and the same state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and its Escape effect.

From three typed strings in PROMPTS, matched against the box when you press Send: the text of a sample prompt, ignoring case and spaces at the ends, gets that prompt's reply; any other text gets “In this demo only the three sample prompts have answers”; an empty box asks you to type something. No model, search or network is involved, and the reply says it was typed in advance.

Everything: the question, the reply and the notes it cites are typed in the file, and nothing leaves the page. To connect your own, replace the body of send with a request to your assistant, show a loading line in the reply box while it runs, and render its answer and its sources in the same three lines. Keep the “typed in advance” label only for the sample replies.

Press the launcher with Enter or Space; focus moves into the field. The three capability buttons are in the tab order before it, a prompt fills the field and keeps focus there, and Enter in the field sends. Escape closes the popover and returns focus to the launcher, as does Maybe later. A polite status line says what was filled in, what was answered and when it closed.

The popover is the width of the screen less a margin and sits above the launcher; the capability lines show only their names to save room, and the real popover is capped to the height of the screen and scrolls inside if it needs to. The reply box keeps its height, so nothing moves when an answer arrives.

Edit PROMPTS: each has a title, the sample text it fills the box with, the typed reply and a source count; to use another icon add it to PromptGlyph. Keep replies to about two lines so the reply box doesn't need to grow.