Chat Conversation Thread Features Block for React

The thread is written out in Thread, one Theirs or Ours wrapper per message, with the customer's messages at the start and the agents' at the end. A text message is a Bubble with a BubbleContent; the status card, the attachment and the reaction are small components above it (StatusCard, Attachment, Reaction). Swap their text for your own, or add a message by copying one wrapper. The hand-off line is a plain paragraph between two hairlines.

Edit FEATURES at the top of the file: each entry has an icon, a title and one sentence. They render as a list with an h3 per item, divided by hairlines under the section's one h2. Keep them to three so the list ends above the Shine Button on a laptop screen.

Yes. The window is bg-card with a hairline border, the customer's bubbles use the muted variant, and the agent's bubbles are bg-foreground text-background, which is dark on a light page and light on a dark one. Nothing in the thread uses your primary colour or a fixed colour, so it reads in every preset, light and dark.

The heading is an h2, the features are the items of a list with an h3 each, and the Shine Button is a real link. The thread itself is decoration: it is aria-hidden and inert, so none of its text is read twice and none of its controls take focus. In a right-to-left page the thread mirrors, with the customer's messages moving to the other side. The button renders the link it's given with render, with nativeButton={false}.

The header, the list and the button fade up once when the page loads, with CSS transitions. The typing line's three dots rise and fall in turn; with reduced motion they hold still and the transitions are off, so the section simply appears.

The copy comes first and the thread below it, with a hairline between them where the divider sits on a laptop. The thread keeps its full height, with the composer at its foot, in a frame up to 28 rem wide; the bubbles never pass 85% of the window, so long messages wrap instead of touching the other side.