shadcn.io is not affiliated with official shadcn/ui
Link Previews Chat Block for Vue
A thread where a web address typed into the field draws a removable preview tray with a drawn thumbnail, title and two lines, and sending posts the message with its link card under the bubble.
Installation
Overview
Show the card a link becomes before it is sent, with this link previews chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Lanternpost, a link-sharing chat: the top bar names Idony Marchetti, and the log is a day label and a run of Message and Bubble rows with a link card under her first message. Typing or pasting a web address into the field opens a tray above it with a drawn greyscale thumbnail, the title, two lines of description and the host with a two-letter tile; "Remove preview" drops the tray and the link goes as plain text. A host with no sample gets a card that says there is no preview for it. The composer's Shine Button, the only colored control, sends the message and its card, and a Typing Indicator Text shows before the typed reply. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a chat that unfurls links.
FAQ
What stays in the page, and how do I make it real?
Everything. Four fictional hosts are typed into LINKS with their title, description and a drawn thumbnail, and the address is read with new URL (http and https only). Nothing is fetched and pressing a card opens nothing, as the line under the composer says. To wire it for real, send the address to your own unfurl service when the draft changes, store the title, description and image with the message, and render the card from that record.
How does the preview tray behave?
The tray shows as soon as the field holds an address on a known or unknown host and the address has not been removed. Removing it remembers that address, so typing on does not bring the tray back, and sending then posts the bare link. Sending with the tray open posts the message with its card; the draft and the removal are cleared.
What happens with a host that has no sample?
The tray and the card show the host and the words "No preview for this host in this demo" in the same box, so nothing changes size. Add a host to LINKS and it gets a title, a description and one of four drawn thumbnails.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description tells a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit, Send stays quiet while there is nothing to send and says so if pressed, and focus returns to the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. The tray is a named group, Remove preview is a real button, and the thumbnails are hidden from assistive technology because the title and host are always in text. A card is an article named after its host.