50: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"] 51: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"] 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:T76c,'use client' import { useCallback, useEffect, useState } from 'react' import { createClient } from '@/registry/default/clients/nextjs/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 } } 55:Ta22,import { createServerClient } from '@supabase/ssr' import { NextResponse, type NextRequest } from 'next/server' export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) // With Fluid compute, don't put this client in a global environment // variable. Always create a new one on each request. const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options) ) }, }, } ) // Do not run code between createServerClient and // supabase.auth.getClaims(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. // IMPORTANT: If you remove getClaims() and you use server-side rendering // with the Supabase client, your users may be randomly logged out. const { data } = await supabase.auth.getClaims() const user = data?.claims if ( !user && !request.nextUrl.pathname.startsWith('/login') && !request.nextUrl.pathname.startsWith('/auth') && // the OAuth consent route sends unauthenticated visitors to the login page // itself, so that it can preserve the authorization in the `next` parameter request.nextUrl.pathname !== '/oauth/consent' ) { // no user, potentially respond by redirecting the user to the login page const url = request.nextUrl.clone() url.pathname = '/auth/login' return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. // If you're creating a new response object with NextResponse.next() make sure to: // 1. Pass the request in it, like so: // const myNewResponse = NextResponse.next({ request }) // 2. Copy over the cookies, like so: // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) // 3. Change the myNewResponse object to fit your needs, but avoid changing // the cookies! // 4. Finally: // return myNewResponse // If this is not done, you may be causing the browser and server to go out // of sync and terminate the user's session prematurely! return supabaseResponse } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@supabase","registryDependencies":["input","button"]}]]}],null]}],["$","$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/nextjs/lib/supabase/client.ts","content":"import { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!\n )\n}\n","type":"registry:lib"},{"path":"registry/default/clients/nextjs/lib/supabase/middleware.ts","content":"$55","type":"registry:lib"},{"path":"registry/default/clients/nextjs/lib/supabase/server.ts","content":"import { createServerClient } from '@supabase/ssr'\nimport { cookies } from 'next/headers'\n\n/**\n * If using Fluid compute: Don't put this client in a global variable. Always create a new client within each\n * function when using it.\n */\nexport async function createClient() {\n const cookieStore = await cookies()\n\n return createServerClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return cookieStore.getAll()\n },\n setAll(cookiesToSet) {\n try {\n cookiesToSet.forEach(({ name, value, options }) =>\n cookieStore.set(name, value, options)\n )\n } catch {\n // The `setAll` method was called from a Server Component.\n // This can be ignored if you have middleware refreshing\n // user sessions.\n }\n },\n },\n }\n )\n}\n","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]