How to Build Chat application with V0

1// Paste this prompt into V0's AI chat:
2// Build a real-time chat app with Supabase. Create these tables:
3// 1. channels: id (uuid PK), name (text), type (text CHECK in 'group','direct'), created_by (uuid FK to auth.users), created_at (timestamptz)
4// 2. channel_members: channel_id (uuid FK), user_id (uuid FK), 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), sender_id (uuid FK to auth.users), content (text), type (text default 'text'), metadata (jsonb), created_at (timestamptz), updated_at (timestamptz)
6// Enable Realtime on the messages table.
7// Add RLS: only channel members can read/write messages in their channels.

1// Paste this prompt into V0's AI chat:
2// Build a chat layout at app/chat/layout.tsx.
3// Requirements:
4// - Left sidebar showing channel list with:
5//   - Channel name and type icon (group/direct)
6//   - Unread message count Badge (compare last_read_at with latest message created_at)
7//   - Active channel highlighted
8//   - "New Channel" Button at top
9// - Main area on the right for message thread (rendered by child pages)
10// - Use shadcn/ui Sidebar for the channel list, Badge for unread counts, Avatar for user icons in DMs
11// - Server Component fetches channels for the current user from channel_members join channels
12// - Responsive: sidebar collapses to Sheet on mobile

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
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 { channelId, senderId, content } = await req.json()
11
12  const { data: member } = await supabase
13    .from('channel_members')
14    .select('user_id')
15    .eq('channel_id', channelId)
16    .eq('user_id', senderId)
17    .single()
18
19  if (!member) {
20    return NextResponse.json({ error: 'Not a channel member' }, { status: 403 })
21  }
22
23  const { data: message, error } = await supabase
24    .from('messages')
25    .insert({
26      channel_id: channelId,
27      sender_id: senderId,
28      content,
29    })
30    .select()
31    .single()
32
33  if (error) return NextResponse.json({ error: error.message }, { status: 500 })
34
35  await supabase
36    .from('channel_members')
37    .update({ last_read_at: new Date().toISOString() })
38    .eq('channel_id', channelId)
39    .eq('user_id', senderId)
40
41  return NextResponse.json({ message })
42}

1// Paste this prompt into V0's AI chat:
2// Build a real-time typing indicator and presence component for the chat.
3// Requirements:
4// - 'use client' component that wraps the message thread
5// - Subscribe to Supabase Realtime channel `chat:${channelId}`
6// - Listen for INSERT events on the messages table filtered by channel_id for new messages
7// - Use Presence to track online users and typing status:
8//   - On message input focus/typing, call channel.track({ user_id, typing: true })
9//   - On blur or 3-second debounce, call channel.track({ user_id, typing: false })
10//   - Read presenceState() to show which users are typing and who is online
11// - Display typing indicator text: "Alice is typing..." or "Alice and Bob are typing..."
12// - Show green dot indicator next to online users in the channel member list
13// - Merge incoming messages with the loaded list without duplicates (check message id)
14// - Auto-scroll to bottom on new messages unless the user has scrolled up

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function createChannel(
12  name: string,
13  type: 'group' | 'direct',
14  createdBy: string,
15  memberIds: string[]
16) {
17  const { data: channel, error } = await supabase
18    .from('channels')
19    .insert({ name, type, created_by: createdBy })
20    .select()
21    .single()
22
23  if (error) throw new Error(error.message)
24
25  const members = [createdBy, ...memberIds].map((userId) => ({
26    channel_id: channel.id,
27    user_id: userId,
28    role: userId === createdBy ? 'admin' : 'member',
29  }))
30
31  await supabase.from('channel_members').insert(members)
32  revalidatePath('/chat')
33  return channel
34}
35
36export async function loadOlderMessages(
37  channelId: string,
38  beforeTimestamp: string,
39  limit: number = 50
40) {
41  const { data } = await supabase
42    .from('messages')
43    .select('*')
44    .eq('channel_id', channelId)
45    .lt('created_at', beforeTimestamp)
46    .order('created_at', { ascending: false })
47    .limit(limit)
48
49  return data?.reverse() ?? []
50}