Share dialog
Share a chat as a snapshot: who can open it, the link with Copy link, a note that later messages stay private, Update link, and export as Markdown or PDF.
On this page
Pick who can open it, create and copy the link, export as Markdown or PDF.
Installation
Usage
import { ShareDialog } from "@/components/ui/chatcn/share-dialog"
<ShareDialog
trigger={<Button size="sm" variant="outline"><ShareIcon />Share</Button>}
chatTitle={chat.title}
messages={chat.messages.slice(0, 4)}
messageCount={chat.messages.length}
workspace="Tidewater"
link={share?.url}
onCreateLink={async (visibility) => (await createShare(chat.id, visibility)).url}
onDeleteLink={() => deleteShare(chat.id)}
onExport={(format) => exportChat(chat.id, format)}
/>Examples
Update a link
A chat that has moved on since its link was made. Open Share to update the link.
Props
| Prop | Type | Notes |
|---|---|---|
open, defaultOpen, onOpenChange, trigger | Dialog state | |
chatTitle, messages, messageCount | The snapshot. Or pass preview | |
visibility, defaultVisibility, onVisibilityChange | "private" | "workspace" | "link" | |
workspace | string | Adds People in {workspace} |
link | string | The current link |
onCreateLink | (visibility) => string | Promise<string> | Throw to show the error |
newMessages | number | Shows Update link |
onDeleteLink | () => void | |
onExport | (format: "markdown" | "pdf") => void | Promise<void> | Progress on the button |
Keyboard
| Key | Action |
|---|---|
| Arrow keys in Who can open it | Move and select |
Esc | Close the dialog |
Accessibility
- Built on the chatcn dialog: focus is trapped and returns to the Share button. The snapshot is decorative and hidden from screen readers; its caption says what is shared.
- Copy link announces Copied. Export buttons announce when the file is ready or the export failed.
Motion
- The dialog grows from 0.96 over 220 ms, and opens instantly from the keyboard.
- Copy link and export icons swap with the 150 ms blur crossfade; the buttons never change size.