From d0523e7c0281dc7dff2f3969758140c6e2a7196c Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Fri, 3 Jul 2026 19:07:19 -0500
Subject: [PATCH] fix: added Suspense boundary to guest page to prevent Next.js
 useSearchParams errors

---
 src/app/guest/page.tsx | 62 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/app/guest/page.tsx

diff --git a/src/app/guest/page.tsx b/src/app/guest/page.tsx
new file mode 100644
index 0000000..6808b78
--- /dev/null
+++ b/src/app/guest/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import '@livekit/components-styles';
+import {
+  LiveKitRoom,
+  VideoConference,
+  RoomAudioRenderer,
+} from '@livekit/components-react';
+import { useEffect, useState, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+function GuestRoom() {
+  const searchParams = useSearchParams();
+  const room = searchParams.get('room');
+  const [token, setToken] = useState('');
+
+  useEffect(() => {
+    if (!room) return;
+    
+    (async () => {
+      try {
+        const resp = await fetch(`/api/livekit/token?room=${room}&identity=guest-${Math.floor(Math.random() * 1000)}`);
+        const data = await resp.json();
+        setToken(data.token);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, [room]);
+
+  if (!room) {
+    return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Falta el parámetro de la sala (?room=...)</div>;
+  }
+
+  if (token === '') {
+    return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Conectando...</div>;
+  }
+
+  return (
+    <div className="min-h-screen bg-black">
+      <LiveKitRoom
+        video={true}
+        audio={true}
+        token={token}
+        serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL || "wss://live.almeira.com.co"}
+        data-lk-theme="default"
+        style={{ height: '100vh' }}
+      >
+        <VideoConference />
+        <RoomAudioRenderer />
+      </LiveKitRoom>
+    </div>
+  );
+}
+
+export default function GuestPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Cargando...</div>}>
+      <GuestRoom />
+    </Suspense>
+  );
+}