How to Build Document collaboration with V0

1// Paste this prompt into V0's AI chat:
2// Build a collaborative document editor. Create a Supabase schema with:
3// 1. documents: id (uuid PK), title (text), content (jsonb), owner_id (uuid FK to auth.users), workspace_id (uuid), is_public (boolean default false), created_at (timestamptz), updated_at (timestamptz)
4// 2. document_versions: id (uuid PK), document_id (uuid FK to documents), content (jsonb), version_number (int), created_by (uuid FK to auth.users), created_at (timestamptz)
5// 3. collaborators: id (uuid PK), document_id (uuid FK to documents), user_id (uuid FK to auth.users), role (text check in 'editor','viewer','commenter'), invited_at (timestamptz)
6// 4. comments: id (uuid PK), document_id (uuid FK to documents), user_id (uuid FK to auth.users), content (text), selection_json (jsonb), resolved (boolean default false), created_at (timestamptz)
7// Add RLS policies: owner and collaborators can access their documents. Enable Realtime on documents table.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Button } from '@/components/ui/button'
4import { Badge } from '@/components/ui/badge'
5import Link from 'next/link'
6import { createDocument } from './actions'
7
8export default async function DashboardPage() {
9  const supabase = await createClient()
10  const { data: { user } } = await supabase.auth.getUser()
11
12  const { data: ownDocs } = await supabase
13    .from('documents')
14    .select('id, title, updated_at')
15    .eq('owner_id', user?.id)
16    .order('updated_at', { ascending: false })
17    .limit(12)
18
19  const { data: sharedDocs } = await supabase
20    .from('collaborators')
21    .select('role, documents(id, title, updated_at)')
22    .eq('user_id', user?.id)
23    .limit(12)
24
25  return (
26    <div className="container mx-auto py-8">
27      <div className="flex justify-between items-center mb-6">
28        <h1 className="text-3xl font-bold">My Documents</h1>
29        <form action={createDocument}>
30          <Button type="submit">New Document</Button>
31        </form>
32      </div>
33      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
34        {ownDocs?.map((doc) => (
35          <Link key={doc.id} href={`/documents/${doc.id}`}>
36            <Card className="hover:shadow-md transition-shadow">
37              <CardHeader>
38                <CardTitle className="text-lg">{doc.title || 'Untitled'}</CardTitle>
39              </CardHeader>
40              <CardContent>
41                <p className="text-sm text-muted-foreground">
42                  Updated {new Date(doc.updated_at).toLocaleDateString()}
43                </p>
44              </CardContent>
45            </Card>
46          </Link>
47        ))}
48      </div>
49      {sharedDocs && sharedDocs.length > 0 && (
50        <>
51          <h2 className="text-2xl font-semibold mt-10 mb-4">Shared with me</h2>
52          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
53            {sharedDocs.map((item) => (
54              <Link key={item.documents.id} href={`/documents/${item.documents.id}`}>
55                <Card>
56                  <CardHeader>
57                    <CardTitle className="flex items-center gap-2 text-lg">
58                      {item.documents.title || 'Untitled'}
59                      <Badge variant="outline">{item.role}</Badge>
60                    </CardTitle>
61                  </CardHeader>
62                </Card>
63              </Link>
64            ))}
65          </div>
66        </>
67      )}
68    </div>
69  )
70}

1'use client'
2
3import { useEffect, useState, useCallback } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { Avatar, AvatarFallback } from '@/components/ui/avatar'
6import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
7import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from '@/components/ui/menubar'
8
9type Presence = { userId: string; name: string; color: string; cursor: number }
10
11export function CollaborativeEditor({ docId, initialContent, userId, userName }: {
12  docId: string
13  initialContent: string
14  userId: string
15  userName: string
16}) {
17  const [content, setContent] = useState(initialContent)
18  const [collaborators, setCollaborators] = useState<Presence[]>([])
19  const supabase = createClient()
20
21  useEffect(() => {
22    const channel = supabase.channel(`doc:${docId}`)
23
24    channel
25      .on('broadcast', { event: 'content' }, ({ payload }) => {
26        if (payload.userId !== userId) {
27          setContent(payload.content)
28        }
29      })
30      .on('broadcast', { event: 'presence' }, ({ payload }) => {
31        setCollaborators((prev) => {
32          const filtered = prev.filter((p) => p.userId !== payload.userId)
33          return [...filtered, payload as Presence]
34        })
35      })
36      .subscribe()
37
38    return () => {
39      supabase.removeChannel(channel)
40    }
41  }, [docId, userId, supabase])
42
43  const handleChange = useCallback(
44    (newContent: string) => {
45      setContent(newContent)
46      const channel = supabase.channel(`doc:${docId}`)
47      channel.send({
48        type: 'broadcast',
49        event: 'content',
50        payload: { userId, content: newContent },
51      })
52    },
53    [docId, userId, supabase]
54  )
55
56  return (
57    <div className="min-h-screen">
58      <Menubar className="sticky top-0 z-10">
59        <MenubarMenu>
60          <MenubarTrigger>Format</MenubarTrigger>
61          <MenubarContent>
62            <MenubarItem>Bold</MenubarItem>
63            <MenubarItem>Italic</MenubarItem>
64            <MenubarItem>Heading</MenubarItem>
65          </MenubarContent>
66        </MenubarMenu>
67      </Menubar>
68      <div className="flex items-center gap-1 p-2 border-b">
69        {collaborators.map((c) => (
70          <Tooltip key={c.userId}>
71            <TooltipTrigger>
72              <Avatar className="h-7 w-7" style={{ borderColor: c.color }}>
73                <AvatarFallback className="text-xs">{c.name[0]}</AvatarFallback>
74              </Avatar>
75            </TooltipTrigger>
76            <TooltipContent>{c.name}</TooltipContent>
77          </Tooltip>
78        ))}
79      </div>
80      <textarea
81        className="w-full min-h-[70vh] p-8 text-lg focus:outline-none resize-none"
82        value={content}
83        onChange={(e) => handleChange(e.target.value)}
84      />
85    </div>
86  )
87}

1// Paste this prompt into V0's AI chat:
2// Build a version history page at app/documents/[id]/history/page.tsx.
3// Requirements:
4// - Server Component that fetches all document_versions for this document, ordered by version_number DESC
5// - Display versions in a vertical timeline layout using Card components
6// - Each version card shows: version_number as Badge, created_by user name, created_at formatted date, and a preview snippet of the content (first 100 chars)
7// - Add a "Restore this version" Button on each card that calls a Server Action to copy that version's content back to the documents table and create a new version entry
8// - Add a "Compare" Button that opens a Dialog showing the diff between the selected version and the current document content
9// - Use ScrollArea for the timeline if there are many versions
10// - Include a "Save Version" Button at the top that manually creates a snapshot of the current content
11// - Add a "Back to editor" link using shadcn/ui Button variant="ghost"

1// Paste this prompt into V0's AI chat:
2// Build a sharing panel for the document editor.
3// Requirements:
4// - A Sheet component (slides in from right) triggered by a "Share" Button in the editor toolbar
5// - Show current collaborators in a list with Avatar, name, email, and role Badge (editor/viewer/commenter)
6// - Each collaborator row has a DropdownMenu to change role or remove access
7// - An invite section at the top with Input for email, Select for role, and Button to invite
8// - The invite calls a Server Action that inserts into collaborators table and sends an email notification (placeholder for now)
9// - Show the document owner at the top of the list with a "Owner" Badge that can't be changed
10// - Add a Switch to toggle "Anyone with the link can view" for public sharing
11// - Display a copyable share URL using Button with copy-to-clipboard functionality
12// - Use Separator between the invite section and the collaborator list

1// Paste this prompt into V0's AI chat:
2// Build an inline commenting system for the document editor.
3// Requirements:
4// - When a user selects text in the editor and clicks a "Comment" Button (or uses Cmd+Shift+C), open a Popover near the selection
5// - The Popover contains a Textarea for the comment and a Button to submit
6// - Store the comment with selection_json containing the start/end positions of the selected text
7// - Show existing comments as highlighted text spans in the editor with colored underlines
8// - Clicking a highlighted span opens its comment thread in a Popover showing:
9//   - Original commenter Avatar and name
10//   - Comment text and timestamp
11//   - Reply thread with additional comments
12//   - A "Resolve" Button that marks the comment as resolved and removes the highlight
13// - Show a comments sidebar (Sheet from right) listing all unresolved comments with their text context
14// - Use Badge to show comment count in the editor toolbar
15// - Store comments via Server Action with Zod validation (content required, 1-500 chars)