@sansavision/create-pulse 0.4.3 → 0.4.5

package/templates/nextjs-auth-demo/src/app/dashboard/demos/chat/page.tsx

@@ -25,7 +25,15 @@ interface ChatMessage {
 export default function ChatDemoPage() {
     const { data: session } = useSession();
     const [connected, setConnected] = useState(false);
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [messages, setMessages] = useState<ChatMessage[]>(() => {
+        if (typeof window !== "undefined") {
+            try {
+                const stored = localStorage.getItem("pulse-chat-messages");
+                if (stored) return JSON.parse(stored);
+            } catch { /* ignore */ }
+        }
+        return [];
+    });
     const [input, setInput] = useState("");
     const [authUser, setAuthUser] = useState<{
         id: string;
@@ -35,11 +43,24 @@ export default function ChatDemoPage() {
     const [connecting, setConnecting] = useState(true);
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const connRef = useRef<PulseConnection | null>(null);
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const sessionRef = useRef(session);
+    const seenIdsRef = useRef(new Set<string>());
+
+    // Keep session ref in sync
+    useEffect(() => { sessionRef.current = session; }, [session]);
 
     const scrollToBottom = useCallback(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }, []);
 
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("pulse-chat-messages", JSON.stringify(messages.slice(-100)));
+        }
+    }, [messages]);
+
+    // Connect to relay — run ONCE when session is available
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -53,39 +74,50 @@ export default function ChatDemoPage() {
                 setConnected(true);
                 setConnecting(false);
 
-                // Check auth user from the ACCEPT payload
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const user = (connection as any).user;
                 if (user) setAuthUser(user);
 
-                // Open a chat stream
+                // Open the chat stream ONCE and store in ref
                 const stream = connection.stream("chat-room");
+                streamRef.current = stream;
 
                 // Announce join
-                stream.send(
-                    JSON.stringify({
-                        type: "join",
-                        user: session!.user.name,
-                        userId: session!.user.id,
-                    })
-                );
-
-                // Listen for messages
+                const sess = sessionRef.current;
+                if (sess) {
+                    stream.send(
+                        JSON.stringify({
+                            type: "join",
+                            user: sess.user.name,
+                            userId: sess.user.id,
+                        })
+                    );
+                }
+
+                // Listen for messages — uses sessionRef to avoid stale closures
                 stream.on("data", (data: Uint8Array) => {
                     try {
                         const msg = JSON.parse(new TextDecoder().decode(data));
-                        if (msg.type === "chat") {
+                        const currentSess = sessionRef.current;
+                        if (!currentSess) return;
+                        const selfId = currentSess.user.id;
+
+                        // Deduplication via message ID
+                        if (msg.msgId && seenIdsRef.current.has(msg.msgId)) return;
+                        if (msg.msgId) seenIdsRef.current.add(msg.msgId);
+
+                        if (msg.type === "chat" && msg.userId !== selfId) {
                             setMessages((prev) => [
                                 ...prev,
                                 {
-                                    id: crypto.randomUUID(),
+                                    id: msg.msgId || crypto.randomUUID(),
                                     user: msg.user,
                                     userId: msg.userId,
                                     text: msg.text,
                                     timestamp: Date.now(),
                                 },
                             ]);
-                        } else if (msg.type === "join") {
+                        } else if (msg.type === "join" && msg.userId !== selfId) {
                             setOnlineUsers((prev) =>
                                 prev.includes(msg.user) ? prev : [...prev, msg.user]
                             );
@@ -99,6 +131,32 @@ export default function ChatDemoPage() {
                                     timestamp: Date.now(),
                                 },
                             ]);
+
+                            // Announce our presence back
+                            const s = sessionRef.current;
+                            if (s) {
+                                stream.send(JSON.stringify({
+                                    type: "presence",
+                                    user: s.user.name,
+                                    userId: s.user.id,
+                                }));
+                            }
+                        } else if (msg.type === "presence" && msg.userId !== selfId) {
+                            setOnlineUsers((prev) =>
+                                prev.includes(msg.user) ? prev : [...prev, msg.user]
+                            );
+                        } else if (msg.type === "leave" && msg.userId !== selfId) {
+                            setOnlineUsers((prev) => prev.filter(u => u !== msg.user));
+                            setMessages((prev) => [
+                                ...prev,
+                                {
+                                    id: crypto.randomUUID(),
+                                    user: "System",
+                                    userId: "system",
+                                    text: `${msg.user} left the chat`,
+                                    timestamp: Date.now(),
+                                },
+                            ]);
                         }
                     } catch {
                         // ignore parse errors
@@ -106,7 +164,18 @@ export default function ChatDemoPage() {
                 });
 
                 connection.on("disconnect", () => setConnected(false));
-                connection.on("reconnected", () => setConnected(true));
+                connection.on("reconnected", () => {
+                    setConnected(true);
+                    // Re-announce on reconnect
+                    const s = sessionRef.current;
+                    if (s && streamRef.current) {
+                        streamRef.current.send(JSON.stringify({
+                            type: "join",
+                            user: s.user.name,
+                            userId: s.user.id,
+                        }));
+                    }
+                });
             } catch (err) {
                 console.error("Failed to connect:", err);
                 setConnecting(false);
@@ -117,6 +186,17 @@ export default function ChatDemoPage() {
 
         return () => {
             cancelled = true;
+            const sess = sessionRef.current;
+            if (streamRef.current && sess) {
+                try {
+                    streamRef.current.send(JSON.stringify({
+                        type: "leave",
+                        user: sess.user.name,
+                        userId: sess.user.id
+                    }));
+                } catch { /* ignore */ }
+            }
+            streamRef.current = null;
             connRef.current?.disconnect();
         };
     }, [session]);
@@ -125,17 +205,38 @@ export default function ChatDemoPage() {
 
     function sendMessage(e: React.FormEvent) {
         e.preventDefault();
-        if (!input.trim() || !connRef.current) return;
+        if (!input.trim() || !streamRef.current) return;
 
-        const stream = connRef.current.stream("chat-room");
-        stream.send(
+        const text = input.trim();
+        const sess = sessionRef.current;
+        const user = sess?.user?.name || "Anonymous";
+        const usrId = sess?.user?.id || "unknown";
+        const msgId = crypto.randomUUID();
+
+        // Mark as seen so we don't add our own echo
+        seenIdsRef.current.add(msgId);
+
+        streamRef.current.send(
             JSON.stringify({
                 type: "chat",
-                user: session?.user?.name || "Anonymous",
-                userId: session?.user?.id || "unknown",
-                text: input.trim(),
+                user,
+                userId: usrId,
+                text,
+                msgId,
             })
         );
+
+        // Add to local state immediately
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: msgId,
+                user,
+                userId: usrId,
+                text,
+                timestamp: Date.now(),
+            },
+        ]);
         setInput("");
     }
 
@@ -179,7 +280,7 @@ export default function ChatDemoPage() {
                     <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800">
                         <Users className="w-3.5 h-3.5 text-slate-400" />
                         <span className="text-xs text-slate-400">
-                            {onlineUsers.length || 1} online
+                            {onlineUsers.length + 1} online
                         </span>
                     </div>
                 </div>