4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T57b,import { cn } from '@/lib/utils' import type { ChatMessage } from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat' interface ChatMessageItemProps { message: ChatMessage isOwnMessage: boolean showHeader: boolean } export const ChatMessageItem = ({ message, isOwnMessage, showHeader }: ChatMessageItemProps) => { return (

{showHeader && (

{message.user.name} {new Date(message.createdAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true, })}

)}

{message.content}

) } 53:T11ac,'use client' import { Send } from 'lucide-react' import { useCallback, useEffect, useMemo, useState } from 'react' import { cn } from '@/lib/utils' import { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message' import { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll' import { useRealtimeChat, type ChatMessage, } from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat' import { Button } from '@/registry/default/components/ui/button' import { Input } from '@/registry/default/components/ui/input' interface RealtimeChatProps { roomName: string username: string onMessage?: (messages: ChatMessage[]) => void messages?: ChatMessage[] } /** * Realtime chat component * @param roomName - The name of the room to join. Each room is a unique chat. * @param username - The username of the user * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database. * @param messages - The messages to display in the chat. Useful if you want to display messages from a database. * @returns The chat component */ export const RealtimeChat = ({ roomName, username, onMessage, messages: initialMessages = [], }: RealtimeChatProps) => { const { containerRef, scrollToBottom } = useChatScroll() const { messages: realtimeMessages, sendMessage, isConnected, } = useRealtimeChat({ roomName, username, }) const [newMessage, setNewMessage] = useState('') // Merge realtime messages with initial messages const allMessages = useMemo(() => { const mergedMessages = [...initialMessages, ...realtimeMessages] // Remove duplicates based on message id const uniqueMessages = mergedMessages.filter( (message, index, self) => index === self.findIndex((m) => m.id === message.id) ) // Sort by creation date const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt)) return sortedMessages }, [initialMessages, realtimeMessages]) useEffect(() => { if (onMessage) { onMessage(allMessages) } }, [allMessages, onMessage]) useEffect(() => { // Scroll to bottom whenever messages change scrollToBottom() }, [allMessages, scrollToBottom]) const handleSendMessage = useCallback( (e: React.FormEvent) => { e.preventDefault() if (!newMessage.trim() || !isConnected) return sendMessage(newMessage) setNewMessage('') }, [newMessage, isConnected, sendMessage] ) return (

{/* Messages */}

{allMessages.length === 0 ? (

No messages yet. Start the conversation!

) : null}

{allMessages.map((message, index) => { const prevMessage = index > 0 ? allMessages[index - 1] : null const showHeader = !prevMessage || prevMessage.user.name !== message.user.name return (

) })}

) } 54:T772,'use client' import { useCallback, useEffect, useState } from 'react' import { createClient } from '@/registry/default/clients/react-router/lib/supabase/client' interface UseRealtimeChatProps { roomName: string username: string } export interface ChatMessage { id: string content: string user: { name: string } createdAt: string } const EVENT_MESSAGE_TYPE = 'message' export function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) { const supabase = createClient() const [messages, setMessages] = useState([]) const [channel, setChannel] = useState | null>(null) const [isConnected, setIsConnected] = useState(false) useEffect(() => { const newChannel = supabase.channel(roomName) newChannel .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => { setMessages((current) => [...current, payload.payload as ChatMessage]) }) .subscribe(async (status) => { if (status === 'SUBSCRIBED') { setIsConnected(true) } else { setIsConnected(false) } }) setChannel(newChannel) return () => { supabase.removeChannel(newChannel) } }, [roomName, username, supabase]) const sendMessage = useCallback( async (content: string) => { if (!channel || !isConnected) return const message: ChatMessage = { id: crypto.randomUUID(), content, user: { name: username, }, createdAt: new Date().toISOString(), } // Update local state immediately for the sender setMessages((current) => [...current, message]) await channel.send({ type: 'broadcast', event: EVENT_MESSAGE_TYPE, payload: message, }) }, [channel, isConnected, username] ) return { messages, sendMessage, isConnected } } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@supabase/ssr@latest",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fssr","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@supabase/ssr@latest"}]]}]}],["$","li","@supabase/supabase-js@latest",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fsupabase-js","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@supabase/supabase-js@latest"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["input","button"]}]]}],["$","$L50",null,{"sourceUrl":"https://supabase.com/ui/r/realtime-chat-react-router.json","proxyUrl":"https://shadcnregistry.com/r/supabase/realtime-chat-react-router","itemId":"@supabase/realtime-chat-react-router"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/blocks/realtime-chat/components/chat-message.tsx","content":"$52","type":"registry:component"},{"path":"registry/default/blocks/realtime-chat/components/realtime-chat.tsx","content":"$53","type":"registry:component"},{"path":"registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","content":"$54","type":"registry:hook"},{"path":"registry/default/blocks/realtime-chat/hooks/use-chat-scroll.tsx","content":"import { useCallback, useRef } from 'react'\n\nexport function useChatScroll() {\n const containerRef = useRef(null)\n\n const scrollToBottom = useCallback(() => {\n if (!containerRef.current) return\n\n const container = containerRef.current\n container.scrollTo({\n top: container.scrollHeight,\n behavior: 'smooth',\n })\n }, [])\n\n return { containerRef, scrollToBottom }\n}\n","type":"registry:hook"},{"path":"registry/default/clients/react-router/lib/supabase/client.ts","content":"/// \nimport { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n import.meta.env.VITE_SUPABASE_URL!,\n import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!\n )\n}\n","type":"registry:lib"},{"path":"registry/default/clients/react-router/lib/supabase/server.ts","content":"import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'\n\nexport function createClient(request: Request) {\n const headers = new Headers()\n\n const supabase = createServerClient(\n process.env.VITE_SUPABASE_URL!,\n process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return parseCookieHeader(request.headers.get('Cookie') ?? '') as {\n name: string\n value: string\n }[]\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value, options }) =>\n headers.append('Set-Cookie', serializeCookieHeader(name, value, options))\n )\n },\n },\n }\n )\n\n return { supabase, headers }\n}\n","type":"registry:lib"}]}]]}],"$L55"]}]

Realtime Chat

Installation

Files

components

hooks

lib

Styles