shadcn.io is not affiliated with official shadcn/ui
Overlay Modal Chat Block for React Aria
A shop's order page with a Chat with support button, and the support conversation shown open in a dialog over a drawn order: four messages, a composer, a typing line and a typed reply.
Installation
Overview
Put a chat inside a dialog, with this overlay modal chat for React with React Aria. The page is Order 7306 at Boxbridge, a shop: two items, arriving Tuesday, and a "Chat with support" button in the header. Under it a stage draws the order page in greyscale (two item rows, a delivery line and the last support message), and the support dialog is shown open in place over it: a title, a description, a log of four messages with Rufina Vale, and a composer whose Shine Button is the dialog's one primary. Enter sends, Shift and Enter add a line, and a typing line shows before a reply from a short typed script. Pressing the button opens the real Dialog with the same conversation, with a focus trap, Escape to close and focus back on the button; once either is closed, the drawn page shows the last message. It's built from Dialog, Message, Bubble, Textarea and Guides. For help desks, order pages and any "talk to us" button.
FAQ
Which part is only the preview's?
The dialog drawn open in place, its scrim and the drawn order page. They exist so the block shows its open state without trapping focus on the documentation page. In your app keep the Dialog and its trigger, and delete the "in-place" state, the scrim with its native dialog, the Escape effect and the drawing.
What stays local, and how do I wire it to a real chat?
Everything: the four messages and the sample replies are typed in this file, and nothing is sent. Send your messages to your help desk in post, append the agent's messages to the same list as they arrive, and keep the typing line for the moment she is writing.
Do the drawn dialog and the real one share the conversation?
Yes. Both render one SupportChat component from the block's state, so what you typed and sent in place is there when you open the real dialog, and the other way round. The in-place copy unmounts when the real one opens and stays closed until a reload.
Where does focus go?
Opening the real dialog puts focus in the message field, Escape or Close returns it to the "Chat with support" button, and the in-place copy does the same when it closes. On load nothing is focused or scrolled.