shadcn.io is not affiliated with official shadcn/ui
Collaborative Notes Chat Block for Vue
A thread with two shared note cards and an editor pane at the end: edit a note and its card updates with Edited by you, and a scripted collaborator adds one line to it.
Installation
Overview
Show a shared note being written beside a conversation, with this collaborative notes chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Jotstead, a team notes app: Ria Calder has shared a trip plan and a launch checklist, and each note card shows the title, a two-line preview, "2 editing now" and "Edited 09:58 by Ria". "Edit together" opens the note in the editor pane at the end, with an Input for the title, a Textarea for the body and the faces of who is in it; the pane is open on the first note on load. Your edits change the card at once, and the first time you change a note a scripted Ria adds a line to it. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
The notes, the presence line and Ria's added line are typed in the file, and edits stay in the tab; no one else is editing. The pane says "Sample presence" for that reason. To wire it for real, send each change from edit to your document service, merge remote changes into notes, and replace the scripted collaborate with real presence.
What does the scripted collaborator do?
The first time you change a note, Ria appends one line to it about a second later and the thread gets a system line saying so; under reduced motion it happens at once. It happens only once, so a note you are typing in is never rewritten twice.
Where do the edit times come from?
They are typed in a list and used in order, never read from the clock, so the demo reads the same on every visit. The first change after you open a note stamps it "Edited 10:03 by you" and the card follows as you type.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.