Function Page

examples/supabase-chat/src/app/page.tsx:14–86

()

import { useEffect, useMemo, useState } from "react";

export default function Page() {
  // Incrementing this key remounts ChatProvider, which re-runs fetchThreadList.
  // We bump it when a Realtime event signals that the thread list changed in
  // another tab so the sidebar stays in sync without a full page reload.
  const [threadListKey, setThreadListKey] = useState(0);

  // Thread persistence stays server-backed (Supabase) via the same /api/threads
  // REST contract the legacy `threadApiUrl` used — restStorage reproduces those
  // conventions and keeps loadThread deserialization aligned with OpenAI format.
  const storage = useMemo(
    () => restStorage({ baseUrl: "/api/threads", messageFormat: openAIMessageFormat }),
    [],
  );
  const llm = useMemo<ChatLLM>(
    () => ({
      send: ({ threadId, messages, signal }) =>
        fetch("/api/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            // Convert from OpenUI's internal format to OpenAI chat format
            messages: openAIMessageFormat.toApi(messages),
            threadId,
          }),
          signal,
        }),
      streamProtocol: openAIAdapter(),
    }),
    [],
  );

  useEffect(() => {
    const supabase = createSupabaseBrowser();
    let channel: RealtimeChannel | undefined;

    const init = async () => {
      // Ensure an anonymous session exists.
      // Anonymous users get a stable UUID that persists across page refreshes
      // and is used to scope threads via Row Level Security.
      const {
        data: { session },
      } = await supabase.auth.getSession();
      if (!session) {
        await supabase.auth.signInAnonymously();
      }

      // Subscribe to Realtime changes on the threads table.
      // This fires whenever any thread is created, updated, or deleted —
      // including from another tab or device logged in with the same account.
      channel = supabase
        .channel("threads-realtime")
        .on("postgres_changes", { event: "*", schema: "public", table: "threads" }, () => {
          // Remount ChatProvider so the thread sidebar refreshes.
          // Note: remounting clears the current in-progress conversation.
          // For production, consider a more granular update strategy.
          setThreadListKey((k) => k + 1);
        })
        .subscribe();