Reply Thread Reviews Block for React

Nowhere: it's kept in the page's state and shown at the end of the thread with "Just now" and a "You" name, and a polite note says "It stays on this page; nothing was sent". A reload starts afresh. To send replies for real, post the text from the submit handler and add the saved reply to the thread when your server answers. An empty or very short reply shows an error under the box, says it, and puts focus back in the field.

The visible "0 / 280" is hidden from assistive technology so it isn't read on every keystroke. A separate polite status says "Twenty or fewer characters left" when 20 are left, "Ten or fewer" at 10 and "No characters left" at 0, and its text stays the same between those stages, so it's read once at each. The box has maxLength, so nothing can go past 280.

Each reply is a list item with a 2 px rail at its start, indented one step further than the reply above (a smaller step on a phone, so the text keeps its width). The depth is typed in depth on each reply, 1 to 3, and the indent comes from literal classes in depthClass. The seller's replies carry a Seller badge and the buyer's a Reviewer badge, so the speaker is in words and not only the position.

One block with Guides corner marks and overshooting lines, split inside by solid rules with their own marks: the review, the conversation, then the composer. It's a frame in the section, not a card: it follows your theme and stays flat. The rules and marks come from the Guides component, so they match the lines of the other blocks.

Yes. The rail and indent use logical classes, so they sit at the start in either direction; the count, the reply total and the dates are each wrapped so their digits stay in order, and the stars mirror.