How to Build Messaging platform with V0

1// Paste this prompt into V0's AI chat:
2// Build a messaging platform. Create a Supabase schema:
3// 1. channels: id (uuid PK), name (text), description (text), type (text CHECK IN 'public','private','dm'), created_by (uuid FK to auth.users), created_at (timestamptz)
4// 2. channel_members: channel_id (uuid FK to channels), user_id (uuid FK to auth.users), role (text DEFAULT 'member'), joined_at (timestamptz), last_read_at (timestamptz), PRIMARY KEY (channel_id, user_id)
5// 3. messages: id (uuid PK), channel_id (uuid FK to channels), sender_id (uuid FK to auth.users), content (text), attachments (text[]), parent_id (uuid FK to messages NULL for threads), is_edited (boolean DEFAULT false), created_at (timestamptz)
6// 4. reactions: id (uuid PK), message_id (uuid FK to messages), user_id (uuid FK to auth.users), emoji (text)
7// 5. user_presence: user_id (uuid PK FK to auth.users), status (text DEFAULT 'offline'), last_seen (timestamptz)
8// Enable Realtime on the messages table. Add RLS policies: members can read/write in channels they belong to.

1// Paste this prompt into V0's AI chat:
2// Create a messaging layout at app/chat/page.tsx.
3// Requirements:
4// - Two-column layout: sidebar (25%) + main message area (75%)
5// - Sidebar: list of channels with channel name, type icon (hash for public, lock for private, user for DM), unread Badge count
6// - Channel list grouped by type: Channels (public/private), Direct Messages
7// - Active channel highlighted with accent background
8// - Add a 'New Channel' Button that opens a Dialog (name Input, description Textarea, type RadioGroup)
9// - Main area: channel name header, message ScrollArea, input composer at bottom
10// - Message composer: Input with send Button, attachment upload Button, emoji Popover
11// - Use shadcn/ui ScrollArea for messages, Badge for unread counts, Avatar for user icons, ContextMenu for message actions
12// - Mobile: sidebar collapses into a Sheet triggered by hamburger menu

1'use client'
2
3import { useEffect, useState, useRef } from 'react'
4import { createBrowserClient } from '@supabase/ssr'
5import { ScrollArea } from '@/components/ui/scroll-area'
6import { Avatar, AvatarFallback } from '@/components/ui/avatar'
7
8interface Message {
9  id: string
10  content: string
11  sender_id: string
12  sender_name: string
13  created_at: string
14  attachments: string[]
15}
16
17export function MessageList({ channelId, initialMessages }: {
18  channelId: string
19  initialMessages: Message[]
20}) {
21  const [messages, setMessages] = useState(initialMessages)
22  const bottomRef = useRef<HTMLDivElement>(null)
23  const supabase = createBrowserClient(
24    process.env.NEXT_PUBLIC_SUPABASE_URL!,
25    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
26  )
27
28  useEffect(() => {
29    const channel = supabase
30      .channel(`messages:${channelId}`)
31      .on('postgres_changes', {
32        event: 'INSERT',
33        schema: 'public',
34        table: 'messages',
35        filter: `channel_id=eq.${channelId}`,
36      }, (payload) => {
37        setMessages((prev) => [...prev, payload.new as Message])
38        bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
39      })
40      .subscribe()
41
42    return () => { supabase.removeChannel(channel) }
43  }, [channelId, supabase])
44
45  return (
46    <ScrollArea className="flex-1 p-4">
47      {messages.map((msg) => (
48        <div key={msg.id} className="flex gap-3 mb-4">
49          <Avatar><AvatarFallback>{msg.sender_name[0]}</AvatarFallback></Avatar>
50          <div>
51            <p className="text-sm font-medium">{msg.sender_name}</p>
52            <p className="text-sm">{msg.content}</p>
53          </div>
54        </div>
55      ))}
56      <div ref={bottomRef} />
57    </ScrollArea>
58  )
59}

1'use client'
2
3import { useEffect, useState } from 'react'
4import { createBrowserClient } from '@supabase/ssr'
5import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
6
7export function TypingIndicator({ channelId, userId }: {
8  channelId: string
9  userId: string
10}) {
11  const [typingUsers, setTypingUsers] = useState<string[]>([])
12  const supabase = createBrowserClient(
13    process.env.NEXT_PUBLIC_SUPABASE_URL!,
14    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
15  )
16
17  useEffect(() => {
18    const channel = supabase.channel(`typing:${channelId}`)
19      .on('broadcast', { event: 'typing' }, ({ payload }) => {
20        if (payload.user_id !== userId) {
21          setTypingUsers((prev) =>
22            prev.includes(payload.user_name) ? prev : [...prev, payload.user_name]
23          )
24          setTimeout(() => {
25            setTypingUsers((prev) => prev.filter((u) => u !== payload.user_name))
26          }, 3000)
27        }
28      })
29      .subscribe()
30
31    return () => { supabase.removeChannel(channel) }
32  }, [channelId, userId, supabase])
33
34  if (typingUsers.length === 0) return null
35
36  return (
37    <Tooltip>
38      <TooltipTrigger asChild>
39        <p className="text-xs text-muted-foreground animate-pulse">
40          {typingUsers.join(', ')} {typingUsers.length === 1 ? 'is' : 'are'} typing...
41        </p>
42      </TooltipTrigger>
43      <TooltipContent>Active users in this channel</TooltipContent>
44    </Tooltip>
45  )
46}
47
48export function sendTypingEvent(
49  supabase: ReturnType<typeof createBrowserClient>,
50  channelId: string,
51  userId: string,
52  userName: string
53) {
54  supabase.channel(`typing:${channelId}`).send({
55    type: 'broadcast',
56    event: 'typing',
57    payload: { user_id: userId, user_name: userName },
58  })
59}

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { channel_id, sender_id, content, attachments } = await req.json()
11
12  if (!channel_id || !sender_id || !content?.trim()) {
13    return NextResponse.json({ error: 'Missing fields' }, { status: 400 })
14  }
15
16  const { data: member } = await supabase
17    .from('channel_members')
18    .select('user_id')
19    .eq('channel_id', channel_id)
20    .eq('user_id', sender_id)
21    .single()
22
23  if (!member) {
24    return NextResponse.json({ error: 'Not a member' }, { status: 403 })
25  }
26
27  const { data, error } = await supabase
28    .from('messages')
29    .insert({ channel_id, sender_id, content, attachments: attachments || [] })
30    .select()
31    .single()
32
33  if (error) {
34    return NextResponse.json({ error: error.message }, { status: 500 })
35  }
36
37  return NextResponse.json({ data })
38}

1// Paste this prompt into V0's AI chat:
2// Add channel management features:
3// 1. Server Action for creating channels: insert into channels + add creator as admin member
4// 2. Server Action for joining public channels: insert into channel_members
5// 3. Server Action for inviting users to private channels
6// 4. Read receipt tracking: when a user views a channel, update channel_members.last_read_at to now()
7// 5. Unread count query: count messages WHERE created_at > channel_members.last_read_at for each channel
8// 6. Channel settings Dialog: edit name/description, manage members Table with role Badge and remove Button
9// Also add emoji reactions: Popover with common emoji grid, clicking adds/removes reaction on a message.
10// Use ContextMenu on messages for: Edit, Delete, React, Reply (thread).