Direct Message Chat Block for React Aria

The avatar is a real button, so the card opens on hover, on keyboard focus and, on a touch screen, on a press, and it closes on blur or Escape. Its contents (local time, shared groups, joined month) are typed in the file; fill them from your user record. There are no call or video buttons because nothing can be called in this demo.

"Copy profile link" writes a typed link to the clipboard and the status line says whether it worked; if the browser refuses, it says so. "Mute for 8 hours" is local: it draws a bell-off glyph beside the name and changes the menu item to "Unmute", and nothing is silenced anywhere. In your app, save the mute against the conversation and its end time.

Each day is its own list holding its pill and its messages, and the pill is sticky inside that list, so it stays at the top while its day is on screen and is pushed away by the next day's pill. Dates are typed (including the ISO date on each time), so the thread reads the same on every visit.

Everything but the clipboard. The replies come from a short typed script, as the line under the composer says; nothing is sent and no model runs. To wire it for real, send each message to your server where the code says so, and add a pill when a message arrives on a new day.

Enter sends and Shift and Enter add a line, which the field's description says for a screen reader. The field grows with its content up to a limit, Send stays quiet while it is empty and says so if pressed, and focus stays in the field after sending.

The window is no wider than 28rem on every screen, so on a phone it fills the width unchanged: the card opens on a press, the pills still stick and the window keeps its height, with only the log scrolling.