Light Chat Message Bubble CTA Block for React

Edit EXCHANGES at the top of the file: each has a question for the chip and the user's bubble, and an answer for the reply. GREETING is the assistant's first line. Keep answers to two sentences so the demo stays quick; the thread reserves the height of the tallest exchange, so a longer one just makes the chat window taller from the start.

The chip fills in as pressed, your question appears as a bubble on the end side, and the assistant's typing dots show for 900 milliseconds. Then the answer types out once and settles as plain text. Choosing a chip while an answer is still typing starts the new exchange straight away. Nothing loops, so there is nothing to pause.

No: the answers are fixed text in the file, so the block works with no backend. To make it live, send the question from choose to your API and put the reply in phase="answering"; the typing dots are a good place to wait for the response.

The chips are real buttons in a labelled group that say whether they are pressed. The typing dots are hidden, and one polite live line announces the finished answer, never each typed letter. The typing component also keeps the whole answer as text for assistive technology, so nothing is read out letter by letter.

With reduced motion the dots hold still and the answer appears whole instead of being typed, after the same short wait. The entrance fades on the copy are CSS transitions that switch off too.

No. The unseen, finished version of every exchange is stacked in the same grid cell as the live thread, so the chat window is always as tall as the longest exchange, at any width.

It's a link (href="#") to your sign-up. The button renders the link it's given with render, with nativeButton={false}.