### Join Chat Room Button (Client-Side) - TypeScript

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A client-side component that provides a button to join a specific chat room. It uses the `useCurrentUser` hook to get the logged-in user and the Supabase client to insert a new entry into the `chat_room_member` table. Upon successful joining, it refreshes the router and navigates the user to the room's page. This component requires `roomId` as a prop and depends on `useCurrentUser` and the Supabase client.

```typescript
// src/components/join-room-button.tsx
"use client"

import { ComponentProps } from "react"
import { ActionButton } from "./ui/action-button"
import { useCurrentUser } from "@/services/supabase/hooks/useCurrentUser"
import { createClient } from "@/services/supabase/client"
import { useRouter } from "next/navigation"

export function JoinRoomButton({
  children,
  roomId,
  ...props
}: Omit<ComponentProps<typeof ActionButton>, "action"> & { roomId: string }) {
  const { user } = useCurrentUser()
  const router = useRouter()

  async function joinRoom() {
    if (user == null) {
      return { error: true, message: "User not logged in" }
    }

    const supabase = createClient()
    const { error } = await supabase.from("chat_room_member").insert({
      chat_room_id: roomId,
      member_id: user.id,
    })

    if (error) {
      return { error: true, message: "Failed to join room" }
    }

    router.refresh()
    router.push(`/rooms/${roomId}`)

    return { error: false }
  }

  return (
    <ActionButton {...props} action={joinRoom}>
      {children}
    </ActionButton>
  )
}

// Usage
<JoinRoomButton roomId="room-uuid-here" variant="outline">
  Join Room
</JoinRoomButton>
```

--------------------------------

### Get Current User (Server-Side Cache) (Next.js/TS)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A cached server-side function to securely retrieve the currently authenticated user's data from Supabase. This function is intended for use within Next.js server components to avoid redundant data fetching. It redirects to the login page if no user is found.

```typescript
import { cache } from "react"
import { createClient } from "../server"

export const getCurrentUser = cache(async () => {
  const supabase = await createClient()
  return (await supabase.auth.getUser()).data.user
})

// Usage in server components
import { getCurrentUser } from "@/services/supabase/lib/getCurrentUser"
import { redirect } from "next/navigation"

export default async function Page() {
  const user = await getCurrentUser()
  if (user == null) {
    redirect("/auth/login")
  }

  // Use user.id, user.email, etc.
  return <div>Welcome {user.email}</div>
}
```

--------------------------------

### Use Current User Hook (Client-Side) - TypeScript

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A React hook to fetch and subscribe to the current authenticated user's real-time auth state changes. It initializes by getting the current user and then listens for any authentication state changes, updating the user state accordingly. This hook is essential for client components that need to display user-specific information or conditionally render content based on login status.

```typescript
// src/services/supabase/hooks/useCurrentUser.ts
import { useEffect, useState } from "react"
import { createClient } from "../client"
import { User } from "@supabase/supabase-js"

export function useCurrentUser() {
  const [isLoading, setIsLoading] = useState(true)
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    const supabase = createClient()
    supabase.auth
      .getUser()
      .then(({ data }) => {
        setUser(data.user)
      })
      .finally(() => {
        setIsLoading(false)
      })

    const { data } = supabase.auth.onAuthStateChange((_, session) => {
      setUser(session?.user ?? null)
    })

    return () => {
      data.subscription.unsubscribe()
    }
  }, [])

  return { user, isLoading }
}

// Usage in client components
"use client"
import { useCurrentUser } from "@/services/supabase/hooks/useCurrentUser"

export function MyComponent() {
  const { user, isLoading } = useCurrentUser()

  if (isLoading) return <div>Loading...</div>
  if (!user) return <div>Not logged in</div>

  return <div>Hello {user.email}</div>
}
```

--------------------------------

### Configure Supabase Client (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Initializes Supabase clients for browser and server environments using the `@supabase/ssr` library. It leverages environment variables for Supabase URL and keys and incorporates TypeScript database types for enhanced safety. The server-side client also handles cookie management for Next.js server components.

```typescript
// src/services/supabase/client.ts (Browser)
import { createBrowserClient } from "@supabase/ssr"
import { Database } from "./types/database"

export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!
  )
}

// src/services/supabase/server.ts (Server)
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"
import { Database } from "./types/database"

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options })
              => cookieStore.set(name, value, options)
            )
          } catch {
            // Ignore if called from Server Component
          }
        },
      },
    }
  )
}

export function createAdminClient() {
  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SECRET_KEY!,
    {
      cookies: {
        getAll() {
          return []
        },
      },
    }
  )
}

// Usage
// In client components
import { createClient } from "@/services/supabase/client"
const supabase = createClient()

// In server components/actions
import { createClient } from "@/services/supabase/server"
const supabase = await createClient()

// For admin operations (bypasses RLS)
import { createAdminClient } from "@/services/supabase/server"
const supabase = createAdminClient()

```

--------------------------------

### Create Chat Room Server Action - TypeScript

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A Next.js server action to create a new chat room. It uses Zod for schema validation to ensure the provided room name and public status are valid. Upon successful validation, it creates the room in the Supabase database and automatically adds the authenticated user as a member. Finally, it redirects the user to the newly created room's page. Dependencies include Zod for validation, Supabase client for database operations, and Next.js navigation for redirects.

```typescript
// src/services/supabase/actions/rooms.ts
"use server"

import z from "zod"
import { createRoomSchema } from "../schemas/rooms"
import { getCurrentUser } from "../lib/getCurrentUser"
import { createAdminClient } from "../server"
import { redirect } from "next/navigation"

// Schema definition
export const createRoomSchema = z.object({
  name: z.string().min(1).trim(),
  isPublic: z.boolean(),
})

export async function createRoom(unsafeData: z.infer<typeof createRoomSchema>) {
  const { success, data } = createRoomSchema.safeParse(unsafeData)

  if (!success) {
    return { error: true, message: "Invalid room data" }
  }

  const user = await getCurrentUser()
  if (user == null) {
    return { error: true, message: "User not authenticated" }
  }

  const supabase = createAdminClient()

  const { data: room, error: roomError } = await supabase
    .from("chat_room")
    .insert({ name: data.name, is_public: data.isPublic })
    .select("id")
    .single()

  if (roomError || room == null) {
    return { error: true, message: "Failed to create room" }
  }

  const { error: membershipError } = await supabase
    .from("chat_room_member")
    .insert({ chat_room_id: room.id, member_id: user.id })

  if (membershipError) {
    return { error: true, message: "Failed to add user to room" }
  }

  redirect(`/rooms/${room.id}`)
}

// Usage in client component
"use client"
import { createRoom } from "@/services/supabase/actions/rooms"
import { useForm } from "react-hook-form"

export function CreateRoomForm() {
  const form = useForm({
    defaultValues: { name: "", isPublic: false }
  })

  async function handleSubmit(data) {
    const result = await createRoom(data)
    if (result.error) {
      console.error(result.message)
    }
    // Redirects automatically on success
  }

  return (
    <form onSubmit={form.handleSubmit(handleSubmit)}>
      <input {...form.register("name")} placeholder="Room name" />
      <input type="checkbox" {...form.register("isPublic")} />
      <button type="submit">Create</button>
    </form>
  )
}
```

--------------------------------

### Client Chat Input with Optimistic Updates (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A client component for sending chat messages with optimistic UI updates. It handles message input, sending messages to Supabase, and managing local state for pending, successful, and failed messages. Dependencies include `lucide-react` for icons and `sonner` for toasts.

```typescript
"use client"

import { SendIcon } from "lucide-react"
import { FormEvent, useState } from "react"
import { toast } from "sonner"
import { Message, sendMessage } from "@/services/supabase/actions/messages"

type Props = {
  roomId: string
  onSend: (message: { id: string; text: string }) => void
  onSuccessfulSend: (message: Message) => void
  onErrorSend: (id: string) => void
}

export function ChatInput({
  roomId,
  onSend,
  onSuccessfulSend,
  onErrorSend,
}: Props) {
  const [message, setMessage] = useState("")

  async function handleSubmit(e?: FormEvent) {
    e?.preventDefault()
    const text = message.trim()
    if (!text) return

    setMessage("")
    const id = crypto.randomUUID()
    onSend({ id, text })

    const result = await sendMessage({ id, text, roomId })
    if (result.error) {
      toast.error(result.message)
      onErrorSend(id)
    } else {
      onSuccessfulSend(result.message)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        placeholder="Type your message..."
        value={message}
        onChange={e => setMessage(e.target.value)}
        onKeyDown={e => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault()
            handleSubmit()
          }
        }}
      />
      <button type="submit" aria-label="Send">
        <SendIcon />
      </button>
    </form>
  )
}

// Usage
// <ChatInput
//   roomId={roomId}
//   onSend={message => {
//     // Add to pending messages
//     setPendingMessages(prev => [...prev, message])
//   }}
//   onSuccessfulSend={message => {
//     // Update message status
//     setPendingMessages(prev =>
//       prev.map(m => m.id === message.id ? { ...message, status: "success" } : m)
//     )
//   }}
//   onErrorSend={id => {
//     // Mark message as failed
//     setPendingMessages(prev =>
//       prev.map(m => m.id === id ? { ...m, status: "error" } : m)
//     )
//   }}
// />
```

--------------------------------

### Login Form for GitHub OAuth Authentication (React/TSX)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Provides a client-side login form component that initiates the GitHub OAuth flow using Supabase Auth. It handles loading states and displays potential errors during the authentication process. Dependencies include Supabase client and UI button components.

```tsx
"use client"

import { createClient } from "@/services/supabase/client"
import { Button } from "@/components/ui/button"
import { useState } from "react"

export function LoginForm() {
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)

  const handleSocialLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: "github",
        options: {
          redirectTo: `${window.location.origin}/auth/oauth?next=/`,
        },
      })

      if (error) throw error
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
      setIsLoading(false)
    }
  }

  return (
    <form onSubmit={handleSocialLogin}>
      {error && <p className="text-sm text-destructive-500">{error}</p>}
      <Button type="submit" disabled={isLoading}>
        {isLoading ? "Logging in..." : "Continue with GitHub"}
      </Button>
    </form>
  )
}
```

--------------------------------

### Add User to Room Server Action (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A server action written in TypeScript that allows inviting and adding users to a chat room. It performs validation to ensure the current user is authenticated and a member of the room, checks if the target user exists, and verifies they are not already a member before inserting them into the `chat_room_member` table using an admin Supabase client.

```typescript
// src/services/supabase/actions/rooms.ts
"use server"

import { getCurrentUser } from "../lib/getCurrentUser"
import { createAdminClient } from "../server"

export async function addUserToRoom({
  roomId,
  userId,
}: {
  roomId: string
  userId: string
}) {
  const currentUser = await getCurrentUser()
  if (currentUser == null) {
    return { error: true, message: "User not authenticated" }
  }

  const supabase = createAdminClient()

  // Check if current user is a member
  const { data: roomMembership, error: roomMembershipError } = await supabase
    .from("chat_room_member")
    .select("member_id")
    .eq("chat_room_id", roomId)
    .eq("member_id", currentUser.id)
    .single()

  if (roomMembershipError || !roomMembership) {
    return { error: true, message: "Current user is not a member of the room" }
  }

  // Check if user to add exists
  const { data: userProfile } = await supabase
    .from("user_profile")
    .select("id")
    .eq("id", userId)
    .single()

  if (userProfile == null) {
    return { error: true, message: "User not found" }
  }

  // Check if user is already a member
  const { data: existingMembership } = await supabase
    .from("chat_room_member")
    .select("member_id")
    .eq("chat_room_id", roomId)
    .eq("member_id", userProfile.id)
    .single()

  if (existingMembership) {
    return { error: true, message: "User is already a member of the room" }
  }

  // Add user to room
  const { error: insertError } = await supabase
    .from("chat_room_member")
    .insert({ chat_room_id: roomId, member_id: userProfile.id })

  if (insertError) {
    return { error: true, message: "Failed to add user to room" }
  }

  return { error: false, message: "User added to room successfully" }
}

// Usage
import { addUserToRoom } from "@/services/supabase/actions/rooms"

async function handleInviteUser(roomId: string, userId: string) {
  const result = await addUserToRoom({ roomId, userId })

  if (result.error) {
    toast.error(result.message)
  } else {
    toast.success(result.message)
  }
}

```

--------------------------------

### Real-Time Chat with Presence using Supabase

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Implements real-time message subscriptions and user presence tracking via Supabase Realtime channels. It subscribes to a channel, listens for 'sync' events to update connected user count, and 'INSERT' events for new messages. Requires Supabase client and message types.

```typescript
"use client"

import { Message } from "@/services/supabase/actions/messages"
import { createClient } from "@/services/supabase/client"
import { RealtimeChannel } from "@supabase/supabase-js"
import { useEffect, useState } from "react"

function useRealtimeChat({
  roomId,
  userId,
}: {
  roomId: string
  userId: string
}) {
  const [connectedUsers, setConnectedUsers] = useState(1)
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    const supabase = createClient()
    let newChannel: RealtimeChannel
    let cancel = false

    supabase.realtime.setAuth().then(() => {
      if (cancel) return

      newChannel = supabase.channel(`room:${roomId}:messages`, {
        config: {
          private: true,
          presence: {
            key: userId,
          },
        },
      })

      newChannel
        .on("presence", { event: "sync" }, () => {
          setConnectedUsers(Object.keys(newChannel.presenceState()).length)
        })
        .on("broadcast", { event: "INSERT" }, payload => {
          const record = payload.payload
          setMessages(prevMessages => [
            ...prevMessages,
            {
              id: record.id,
              text: record.text,
              created_at: record.created_at,
              author_id: record.author_id,
              author: {
                name: record.author_name,
                image_url: record.author_image_url,
              },
            },
          ])
        })
        .subscribe(status => {
          if (status !== "SUBSCRIBED") return
          newChannel.track({ userId })
        })
    })

    return () => {
      cancel = true
      if (!newChannel) return
      newChannel.untrack()
      newChannel.unsubscribe()
    }
  }, [roomId, userId])

  return { connectedUsers, messages }
}

// Usage
export function ChatRoom({ roomId, userId }: { roomId: string; userId: string }) {
  const { connectedUsers, messages } = useRealtimeChat({ roomId, userId })

  return (
    <div>
      <p>{connectedUsers} users online</p>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.author.name}:</strong> {msg.text}
        </div>
      ))}
    </div>
  )
}

```

--------------------------------

### Send Message Server Action (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Server action in Next.js for sending messages to a chat room via Supabase. It validates user authentication, checks for non-empty message content, and verifies if the user is a member of the specified chat room before inserting the message into the 'message' table. It returns the sent message details or an error object. Dependencies include custom Supabase server clients and authentication utilities.

```typescript
"use server"

import { getCurrentUser } from "../lib/getCurrentUser"
import { createAdminClient } from "../server"

export type Message = {
  id: string
  text: string
  created_at: string
  author_id: string
  author: {
    name: string
    image_url: string | null
  }
}

export async function sendMessage(data: {
  id: string
  text: string
  roomId: string
}): Promise<
  { error: false; message: Message } | { error: true; message: string }
> {
  const user = await getCurrentUser()
  if (user == null) {
    return { error: true, message: "User not authenticated" }
  }

  if (!data.text.trim()) {
    return { error: true, message: "Message cannot be empty" }
  }

  const supabase = await createAdminClient()

  const { data: membership, error: membershipError } = await supabase
    .from("chat_room_member")
    .select("member_id")
    .eq("chat_room_id", data.roomId)
    .eq("member_id", user.id)
    .single()

  if (membershipError || !membership) {
    return { error: true, message: "User is not a member of the chat room" }
  }

  const { data: message, error } = await supabase
    .from("message")
    .insert({
      id: data.id,
      text: data.text.trim(),
      chat_room_id: data.roomId,
      author_id: user.id,
    })
    .select(
      "id, text, created_at, author_id, author:user_profile (name, image_url)"
    )
    .single()

  if (error) {
    return { error: true, message: "Failed to send message" }
  }

  return { error: false, message }
}

// Usage in client component
// import { sendMessage } from "@/services/supabase/actions/messages"
// import { toast } from "sonner"

// async function handleSendMessage(text: string, roomId: string) {
//   const id = crypto.randomUUID()
//   const result = await sendMessage({ id, text, roomId })

//   if (result.error) {
//     toast.error(result.message)
//   } else {
//     console.log("Message sent:", result.message)
//   }
// }
```

--------------------------------

### OAuth Callback Handler for Supabase Authentication (Next.js/TS)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

A server-side route handler that processes the callback from OAuth providers (like GitHub) after a user authenticates. It exchanges the authorization code for a Supabase session and redirects the user to the intended page. Handles environment-specific redirects.

```typescript
import { NextResponse } from "next/server"
import { createClient } from "@/services/supabase/server"

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get("code")
  let next = searchParams.get("next") ?? "/"

  if (!next.startsWith("/")) {
    next = "/"
  }

  if (code) {
    const supabase = await createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)

    if (!error) {
      const forwardedHost = request.headers.get("x-forwarded-host")
      const isLocalEnv = process.env.NODE_ENV === "development"

      if (isLocalEnv) {
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  return NextResponse.redirect(`${origin}/auth/error`)
}
```

--------------------------------

### Fetch Public and Joined Rooms (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Server-side functions to retrieve chat rooms. `getPublicRooms` fetches all public rooms with their member counts. `getJoinedRooms` retrieves rooms a specific user has joined, also including member counts. These functions use Supabase's server-side client for data fetching.

```typescript
import { getCurrentUser } from "@/services/supabase/lib/getCurrentUser"
import { createAdminClient } from "@/services/supabase/server"

async function getPublicRooms() {
  const supabase = createAdminClient()

  const { data, error } = await supabase
    .from("chat_room")
    .select("id, name, chat_room_member (count)")
    .eq("is_public", true)
    .order("name", { ascending: true })

  if (error) {
    return []
  }

  return data.map(room => ({
    id: room.id,
    name: room.name,
    memberCount: room.chat_room_member[0].count,
  }))
}

async function getJoinedRooms(userId: string) {
  const supabase = createAdminClient()

  const { data, error } = await supabase
    .from("chat_room")
    .select("id, name, chat_room_member (member_id)")
    .order("name", { ascending: true })

  if (error) {
    return []
  }

  return data
    .filter(room => room.chat_room_member.some(u => u.member_id === userId))
    .map(room => ({
      id: room.id,
      name: room.name,
      memberCount: room.chat_room_member.length,
    }))
}

// Usage in server component
// export default async function HomePage() {
//   const user = await getCurrentUser()
//   if (!user) redirect("/auth/login")

//   const [publicRooms, joinedRooms] = await Promise.all([
//     getPublicRooms(),
//     getJoinedRooms(user.id),
//   ])

//   return (
//     <div>
//       <h2>Your Rooms</h2>
//       {joinedRooms.map(room => (
//         <div key={room.id}>
//           {room.name} - {room.memberCount} members
//         </div>
//       ))}

//       <h2>Public Rooms</h2>
//       {publicRooms.map(room => (
//         <div key={room.id}>
//           {room.name} - {room.memberCount} members
//         </div>
//       ))}
//     </div>
//   )
// }
```

--------------------------------

### Leave Chat Room Client Action (TypeScript)

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Client-side component using React and Next.js to allow a user to leave a chat room. It requires the user to be logged in and removes their membership from the 'chat_room_member' table in Supabase. The UI uses a generic ActionButton and refreshes the router on successful departure. Dependencies include React, Next.js router, and custom Supabase hooks/clients.

```typescript
"use client"

import { ComponentProps } from "react"
import { ActionButton } from "./ui/action-button"
import { useCurrentUser } from "@/services/supabase/hooks/useCurrentUser"
import { createClient } from "@/services/supabase/client"
import { useRouter } from "next/navigation"

export function LeaveRoomButton({
  children,
  roomId,
  ...props
}: Omit<ComponentProps<typeof ActionButton>, "action"> & { roomId: string }) {
  const { user } = useCurrentUser()
  const router = useRouter()

  async function leaveRoom() {
    if (user == null) {
      return { error: true, message: "User not logged in" }
    }

    const supabase = createClient()
    const { error } = await supabase
      .from("chat_room_member")
      .delete()
      .eq("chat_room_id", roomId)
      .eq("member_id", user.id)

    if (error) {
      return { error: true, message: "Failed to leave room" }
    }

    router.refresh()

    return { error: false }
  }

  return (
    <ActionButton {...props} action={leaveRoom}>
      {children}
    </ActionButton>
  )
}

// Usage
// <LeaveRoomButton roomId="room-uuid-here" variant="destructive">
//   Leave Room
// </LeaveRoomButton>
```

--------------------------------

### Infinite Scroll Chat Messages using Supabase

Source: https://context7.com/webdevsimplified/supabase-realtime-chat/llms.txt

Loads historical messages with infinite scroll pagination, fetching messages older than the current set. It uses an Intersection Observer to trigger loading more messages when a specific element becomes visible. Requires Supabase client and message types.

```typescript
"use client"

import { Message } from "@/services/supabase/actions/messages"
import { createClient } from "@/services/supabase/client"
import { useState } from "react"

const LIMIT = 25

function useInfiniteScrollChat({
  startingMessages,
  roomId,
}: {
  startingMessages: Message[]
  roomId: string
}) {
  const [messages, setMessages] = useState<Message[]>(startingMessages)
  const [status, setStatus] = useState<"idle" | "loading" | "error" | "done">
    (startingMessages.length === 0 ? "done" : "idle")

  async function loadMoreMessages() {
    if (status === "done" || status === "loading") return
    const supabase = createClient()
    setStatus("loading")

    const { data, error } = await supabase
      .from("message")
      .select(
        "id, text, created_at, author_id, author:user_profile (name, image_url)"
      )
      .eq("chat_room_id", roomId)
      .lt("created_at", messages[0].created_at)
      .order("created_at", { ascending: false })
      .limit(LIMIT)

    if (error) {
      setStatus("error")
      return
    }

    setMessages(prev => [...data.toReversed(), ...prev])
    setStatus(data.length < LIMIT ? "done" : "idle")
  }

  function triggerQueryRef(node: HTMLDivElement | null) {
    if (node == null) return
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting && entry.target === node) {
            observer.unobserve(node)
            loadMoreMessages()
          }
        })
      },
      { rootMargin: "50px" }
    )

    observer.observe(node)

    return () => {
      observer.disconnect()
    }
  }

  return { loadMoreMessages, messages, status, triggerQueryRef }
}

// Usage
export function ChatMessages({ roomId, initialMessages }: {
  roomId: string
  initialMessages: Message[]
}) {
  const { messages, status, triggerQueryRef } = useInfiniteScrollChat({
    roomId,
    startingMessages: initialMessages.toReversed(),
  })

  return (
    <div>
      {status === "loading" && <p>Loading more messages...</p>}
      {messages.map((message, index) => (
        <div
          key={message.id}
          ref={index === 0 && status === "idle" ? triggerQueryRef : null}
        >
          {message.text}
        </div>
      ))}
    </div>
  )
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.