51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53: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}

) } 54: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 (

) })}

) } 55: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 } } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@supabase/ssr@latest",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fssr","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@supabase/ssr@latest"}]]}]}],["$","li","@supabase/supabase-js@latest",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fsupabase-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@supabase/supabase-js@latest"}]]}]}]]}],["$","$L51",null,{"namespace":"@supabase","registryDependencies":["input","button"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/blocks/realtime-chat/components/chat-message.tsx","content":"$53","type":"registry:component"},{"path":"registry/default/blocks/realtime-chat/components/realtime-chat.tsx","content":"$54","type":"registry:component"},{"path":"registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","content":"$55","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"}],"className":"h-[70svh] min-h-80"}]]}]