How to Build a Chat Application with Lovable

1Create a real-time chat application schema. Tables:
2
31. conversations: id, title (text nullable — null means 1:1 DM, non-null means group), created_by (references auth.users), created_at, last_message_at (timestamptz)
4
52. conversation_participants: id, conversation_id (references conversations), user_id (references auth.users), last_read_at (timestamptz default now()), joined_at, UNIQUE(conversation_id, user_id)
6
73. messages: id, conversation_id (references conversations), user_id (references auth.users), body (text), file_url (text nullable), file_name (text nullable), file_type (text nullable), created_at, updated_at
8
9RLS:
10- conversations: users can SELECT conversations they participate in via conversation_participants
11- conversation_participants: users can SELECT their own participant rows
12- messages: users can SELECT messages from conversations they participate in. Users can INSERT to conversations they participate in. Users can UPDATE their own messages only.
13
14Indexes:
15- messages(conversation_id, created_at DESC) — fast message feed queries
16- conversation_participants(user_id, last_read_at) — fast unread count calculation
17- conversations(last_message_at DESC) — sorted conversation list
18
19Trigger: on INSERT to messages, UPDATE conversations.last_message_at = NOW() where id = new.conversation_id

1Build a chat sidebar component at src/components/ChatSidebar.tsx.
2
3Requirements:
4- Fetch conversations joined with conversation_participants and a subquery for unread_count
5- For 1:1 DMs (title IS NULL), fetch the other participant's profile from auth.users metadata to show their display name and avatar
6- Render each conversation as a clickable row with:
7  - Avatar (other user's avatar for DM, a group icon for group chats)
8  - Conversation title or other user's name
9  - Last message preview (truncated to 40 chars)
10  - Relative timestamp (date-fns formatDistanceToNow)
11  - Unread count Badge (hidden when 0)
12- Sort by last_message_at DESC
13- Clicking a conversation sets it as active and calls update_last_read() to mark all messages as read
14- Add a 'New Chat' Button at the top that opens a Dialog to search for users and start a new DM or group chat
15- Subscribe to postgres_changes on conversation_participants (UPDATE) to refresh unread counts when messages arrive in other conversations

1// src/components/MessageFeed.tsx
2import { useEffect, useRef, useState, useCallback } from 'react'
3import { supabase } from '@/lib/supabase'
4import { useAuth } from '@/hooks/useAuth'
5import { nanoid } from 'nanoid'
6
7type Message = {
8  id: string
9  user_id: string
10  body: string
11  file_url: string | null
12  created_at: string
13  status?: 'sending' | 'sent' | 'failed'
14}
15
16export function useMessageFeed(conversationId: string | null) {
17  const { user } = useAuth()
18  const [messages, setMessages] = useState<Message[]>([])
19  const [loading, setLoading] = useState(false)
20  const [oldestCursor, setOldestCursor] = useState<string | null>(null)
21  const [hasMore, setHasMore] = useState(true)
22  const bottomRef = useRef<HTMLDivElement>(null)
23
24  const loadMessages = useCallback(async (before?: string) => {
25    if (!conversationId) return
26    setLoading(true)
27    let q = supabase
28      .from('messages')
29      .select('id, user_id, body, file_url, created_at')
30      .eq('conversation_id', conversationId)
31      .order('created_at', { ascending: false })
32      .limit(30)
33    if (before) q = q.lt('created_at', before)
34    const { data } = await q
35    const rows = (data ?? []).reverse()
36    if (before) {
37      setMessages((prev) => [...rows, ...prev])
38    } else {
39      setMessages(rows)
40      setTimeout(() => bottomRef.current?.scrollIntoView(), 50)
41    }
42    setOldestCursor(rows[0]?.created_at ?? null)
43    setHasMore((data?.length ?? 0) === 30)
44    setLoading(false)
45  }, [conversationId])
46
47  useEffect(() => { loadMessages() }, [loadMessages])
48
49  useEffect(() => {
50    if (!conversationId || !user?.id) return
51    const channel = supabase
52      .channel(`chat:${conversationId}`)
53      .on(
54        'postgres_changes',
55        { event: 'INSERT', schema: 'public', table: 'messages', filter: `conversation_id=eq.${conversationId}` },
56        (payload) => {
57          const incoming = payload.new as Message
58          if (incoming.user_id === user.id) return // already added optimistically
59          setMessages((prev) => [...prev, incoming])
60          setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50)
61        }
62      )
63      .subscribe()
64    return () => { supabase.removeChannel(channel) }
65  }, [conversationId, user?.id])
66
67  const sendMessage = useCallback(async (body: string, fileUrl?: string) => {
68    if (!user?.id || !conversationId) return
69    const tempId = nanoid()
70    const optimistic: Message = {
71      id: tempId, user_id: user.id, body, file_url: fileUrl ?? null,
72      created_at: new Date().toISOString(), status: 'sending'
73    }
74    setMessages((prev) => [...prev, optimistic])
75    setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50)
76    const { data, error } = await supabase
77      .from('messages')
78      .insert({ conversation_id: conversationId, user_id: user.id, body, file_url: fileUrl })
79      .select('id, created_at')
80      .single()
81    setMessages((prev) =>
82      prev.map((m) => m.id === tempId
83        ? { ...m, id: data?.id ?? tempId, created_at: data?.created_at ?? m.created_at, status: error ? 'failed' : 'sent' }
84        : m
85      )
86    )
87  }, [conversationId, user?.id])
88
89  return { messages, loading, hasMore, loadMore: () => loadMessages(oldestCursor ?? undefined), sendMessage, bottomRef }
90}

1// src/hooks/useTypingPresence.ts
2import { useEffect, useRef, useState } from 'react'
3import { RealtimeChannel } from '@supabase/supabase-js'
4import { supabase } from '@/lib/supabase'
5import { useAuth } from '@/hooks/useAuth'
6
7type PresenceUser = { user_id: string; display_name: string; typing: boolean }
8
9export function useTypingPresence(conversationId: string | null, channel: RealtimeChannel | null) {
10  const { user } = useAuth()
11  const [typingUsers, setTypingUsers] = useState<string[]>([])
12  const typingTimeout = useRef<ReturnType<typeof setTimeout>>()
13
14  useEffect(() => {
15    if (!channel) return
16    channel.on('presence', { event: 'sync' }, () => {
17      const state = channel.presenceState<PresenceUser>()
18      const typing = Object.values(state)
19        .flat()
20        .filter((p) => p.typing && p.user_id !== user?.id)
21        .map((p) => p.display_name)
22      setTypingUsers(typing)
23    })
24  }, [channel, user?.id])
25
26  const onTyping = async () => {
27    if (!channel || !user?.id) return
28    clearTimeout(typingTimeout.current)
29    await channel.track({ user_id: user.id, display_name: user.email ?? 'Someone', typing: true })
30    typingTimeout.current = setTimeout(async () => {
31      await channel.track({ user_id: user.id, display_name: user.email ?? 'Someone', typing: false })
32    }, 3000)
33  }
34
35  const typingLabel = typingUsers.length === 0 ? null
36    : typingUsers.length === 1 ? `${typingUsers[0]} is typing...`
37    : `${typingUsers.slice(0, 2).join(' and ')} are typing...`
38
39  return { typingLabel, onTyping }
40}

1Add file attachment support to the message input and message bubbles.
2
3Requirements:
4
51. In the message input area, add a paperclip Button that triggers a hidden file input (accept='image/*,application/pdf,.doc,.docx')
6
72. On file selection:
8   - Show a thumbnail preview above the input (for images) or filename chip (for non-images)
9   - Add an 'x' to remove the pending attachment
10   - On send, upload the file to Supabase Storage at path: conversations/{conversationId}/{Date.now()}-{filename}
11   - Use supabase.storage.from('chat-attachments').upload(path, file)
12   - Get the public URL with supabase.storage.from('chat-attachments').getPublicUrl(path)
13   - Pass the public URL as fileUrl to sendMessage()
14
153. In message bubbles, if file_url is set:
16   - If file_type starts with 'image/', show an img tag with max-w-48, rounded corners, cursor-pointer that opens the image in a Dialog on click
17   - Otherwise show a file download link with a file icon, filename, and a download Button
18
194. Create the 'chat-attachments' Supabase Storage bucket with public access for authenticated users. RLS: authenticated users can INSERT, anyone with the URL can SELECT (public bucket).