Telegram Style Chat Block for React Aria

The keyboard's state (page, Spicy and the dish picked) lives apart from the message list, so pressing a button changes the same bubble and adds nothing to the log. The footer gains "edited" after the first change. The picked state and the dishes share one grid cell, so the bubble never changes height.

The dishes are typed. Spicy keeps only the hot ones, the page count is derived from the list, and a page with fewer than three dishes keeps blank seats so the keyboard stays the same height. Previous and Next are disabled at the ends.

Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. The bot only answers typed text; the buttons say what they did in the status line. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.

The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Receipts and states are a glyph and a word, never a color. Tab runs through the controls, the field and Send.

The same single column. The keyboard is at most 15 rem wide under the bubble, and the window keeps its height with only the log scrolling.