@sansavision/create-pulse 0.4.3 → 0.4.5

package/templates/aurora-auth-node-demo/src/routes/dashboard/demos/encrypted-chat/page.client.tsx

@@ -0,0 +1,472 @@
+
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import { Lock, Send, Shield, Wifi, WifiOff, Loader2, Key, ShieldCheck, Eye, EyeOff, Code, X, ChevronDown, AlertCircle } from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+interface EncryptedMessage {
+    id: string;
+    sender: string;
+    senderId: string;
+    plaintext: string;
+    ciphertext: string;
+    timestamp: number;
+    type: "text" | "code";
+    language?: string;
+}
+
+const CODE_LANGUAGES = [
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "python", label: "Python" },
+    { value: "rust", label: "Rust" },
+    { value: "go", label: "Go" },
+    { value: "java", label: "Java" },
+    { value: "css", label: "CSS" },
+    { value: "html", label: "HTML" },
+    { value: "sql", label: "SQL" },
+    { value: "bash", label: "Bash" },
+    { value: "json", label: "JSON" },
+    { value: "yaml", label: "YAML" },
+    { value: "plaintext", label: "Plain Text" },
+];
+
+export default function EncryptedChatPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [authUser, setAuthUser] = useState<{ id: string; claims: Record<string, string> } | null>(null);
+    const [connecting, setConnecting] = useState(true);
+
+    // Room state
+    const [inRoom, setInRoom] = useState(false);
+    const [roomId, setRoomId] = useState("");
+    const [inputRoomId, setInputRoomId] = useState("");
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState("");
+
+    // Chat state
+    const [messages, setMessages] = useState<EncryptedMessage[]>([]);
+    const [input, setInput] = useState("");
+    const [showCiphertext, setShowCiphertext] = useState(false);
+    const [showCodeEditor, setShowCodeEditor] = useState(false);
+    const [codeContent, setCodeContent] = useState("");
+    const [codeLanguage, setCodeLanguage] = useState("javascript");
+    const [showLangDropdown, setShowLangDropdown] = useState(false);
+
+    const connRef = useRef<PulseConnection | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const codeTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const sessionRef = useRef(session);
+
+    // Keep session ref in sync
+    useEffect(() => { sessionRef.current = session; }, [session]);
+
+    const scrollToBottom = useCallback(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+
+    function simpleEncrypt(text: string, key: string): string {
+        return Array.from(text).map((c, i) =>
+            (c.charCodeAt(0) ^ key.charCodeAt(i % key.length)).toString(16).padStart(2, "0")
+        ).join("");
+    }
+
+    function simpleDecrypt(hex: string, key: string): string {
+        const bytes = hex.match(/.{2}/g) || [];
+        return bytes.map((b, i) =>
+            String.fromCharCode(parseInt(b, 16) ^ key.charCodeAt(i % key.length))
+        ).join("");
+    }
+
+    // Connect to relay
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+    }, [session]);
+
+    // Room Stream logic — set up ONCE when entering a room
+    useEffect(() => {
+        if (!inRoom || !roomId || !connRef.current) return;
+
+        // Load messages from localStorage for this room
+        try {
+            const stored = localStorage.getItem(`pulse-encrypted-${roomId}`);
+            if (stored) {
+                setMessages(JSON.parse(stored));
+            } else {
+                setMessages([]);
+            }
+        } catch { }
+
+        const streamName = `encrypted-room-${roomId}`;
+        const stream = connRef.current.stream(streamName);
+        streamRef.current = stream;
+
+        const handleData = (data: Uint8Array) => {
+            try {
+                const msg = JSON.parse(new TextDecoder().decode(data));
+                const sess = sessionRef.current;
+                const selfId = sess?.user?.id || "unknown";
+
+                // Use userId for filtering — NOT name (two users could have the same name)
+                if ((msg.type === "encrypted-msg" || msg.type === "encrypted-code") && msg.senderId !== selfId) {
+                    const decrypted = simpleDecrypt(msg.ciphertext, roomId);
+                    setMessages((prev) => [
+                        ...prev,
+                        {
+                            id: crypto.randomUUID(),
+                            sender: msg.sender,
+                            senderId: msg.senderId,
+                            plaintext: decrypted,
+                            ciphertext: msg.ciphertext,
+                            timestamp: Date.now(),
+                            type: msg.type === "encrypted-code" ? "code" : "text",
+                            language: msg.language,
+                        },
+                    ]);
+                }
+            } catch { /* ignore */ }
+        };
+
+        stream.on("data", handleData);
+
+        // Cleanup: drop our reference so the stream can be GC'd
+        return () => {
+            streamRef.current = null;
+        };
+        // Only depend on inRoom and roomId — NOT session (avoids re-creating stream)
+    }, [inRoom, roomId]);
+
+    // Save to localStorage whenever messages change in a room
+    useEffect(() => {
+        if (inRoom && roomId) {
+            localStorage.setItem(`pulse-encrypted-${roomId}`, JSON.stringify(messages.slice(-100)));
+        }
+    }, [messages, inRoom, roomId]);
+
+    useEffect(scrollToBottom, [messages, scrollToBottom]);
+
+    function createRoom() {
+        // Generate a 32-hex string to act as both Room ID and Encryption Key
+        const newKey = Array.from(crypto.getRandomValues(new Uint8Array(16)))
+            .map((b) => b.toString(16).padStart(2, "0")).join("");
+        setRoomId(newKey);
+        setInRoom(true);
+    }
+
+    function joinRoom(e: React.FormEvent) {
+        e.preventDefault();
+        const cleaned = inputRoomId.trim();
+        if (!cleaned) return;
+
+        if (!/^[a-fA-F0-9]{32}$/.test(cleaned)) {
+            setError("Invalid key format. Must be a 32-character hex string.");
+            return;
+        }
+
+        setError("");
+        setRoomId(cleaned);
+        setInRoom(true);
+    }
+
+    function copyRoomId() {
+        navigator.clipboard.writeText(roomId);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+
+    function sendMessage(e: React.FormEvent) {
+        e.preventDefault();
+        if (!input.trim() || !streamRef.current || !inRoom) return;
+
+        const plaintext = input.trim();
+        const ciphertext = simpleEncrypt(plaintext, roomId);
+        const sender = session?.user?.name || "Anonymous";
+        const senderId = session?.user?.id || "unknown";
+
+        streamRef.current.send(JSON.stringify({ type: "encrypted-msg", sender, senderId, ciphertext }));
+
+        setMessages((prev) => [
+            ...prev,
+            { id: crypto.randomUUID(), sender, senderId, plaintext, ciphertext, timestamp: Date.now(), type: "text" },
+        ]);
+        setInput("");
+    }
+
+    function sendCode() {
+        if (!codeContent.trim() || !streamRef.current || !inRoom) return;
+
+        const plaintext = codeContent.trim();
+        const ciphertext = simpleEncrypt(plaintext, roomId);
+        const sender = session?.user?.name || "Anonymous";
+        const senderId = session?.user?.id || "unknown";
+
+        streamRef.current.send(JSON.stringify({
+            type: "encrypted-code",
+            sender,
+            senderId,
+            ciphertext,
+            language: codeLanguage,
+        }));
+
+        setMessages((prev) => [
+            ...prev,
+            { id: crypto.randomUUID(), sender, senderId, plaintext, ciphertext, timestamp: Date.now(), type: "code", language: codeLanguage },
+        ]);
+        setCodeContent("");
+        setShowCodeEditor(false);
+    }
+
+    function handleCodeKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+        if (e.key === "Tab") {
+            e.preventDefault();
+            const textarea = e.currentTarget;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newValue = codeContent.substring(0, start) + "  " + codeContent.substring(end);
+            setCodeContent(newValue);
+            setTimeout(() => { textarea.selectionStart = textarea.selectionEnd = start + 2; }, 0);
+        }
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            sendCode();
+        }
+    }
+
+    function openCodeEditor() {
+        setShowCodeEditor(true);
+        setTimeout(() => codeTextareaRef.current?.focus(), 100);
+    }
+
+    const getLanguageLabel = (val: string) => CODE_LANGUAGES.find((l) => l.value === val)?.label || val;
+
+    return (
+        <div className="h-screen flex flex-col">
+            <div className="p-4 border-b border-slate-800">
+                <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center">
+                            <Lock className="w-5 h-5 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-lg font-semibold">E2E Encrypted Chat</h1>
+                            <p className="text-xs text-slate-500">Secure end-to-end messaging</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        {authUser && (
+                            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                                <Shield className="w-3.5 h-3.5 text-green-400" />
+                                <span className="text-xs text-green-400">{authUser.claims.name || authUser.id}</span>
+                            </div>
+                        )}
+                        {connected ? (
+                            <div className="flex items-center gap-1.5"><Wifi className="w-4 h-4 text-green-400" /><span className="text-xs text-green-400">Connected</span></div>
+                        ) : (
+                            <div className="flex items-center gap-1.5"><WifiOff className="w-4 h-4 text-red-400" /><span className="text-xs text-red-400">Disconnected</span></div>
+                        )}
+                    </div>
+                </div>
+
+                {inRoom && (
+                    <div className="flex items-center gap-4">
+                        <div
+                            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-purple-500/10 border border-purple-500/20 cursor-pointer hover:bg-purple-500/20"
+                            onClick={copyRoomId}
+                            title="Click to copy room key"
+                        >
+                            <Key className="w-3.5 h-3.5 text-purple-400" />
+                            <code className="text-xs text-purple-400 font-mono">
+                                {copied ? "Copied!" : roomId.slice(0, 16) + "..."}
+                            </code>
+                        </div>
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-violet-500/10 border border-violet-500/20">
+                            <ShieldCheck className="w-3.5 h-3.5 text-violet-400" />
+                            <span className="text-xs text-violet-400">XOR cipher (demo)</span>
+                        </div>
+                        <button onClick={() => setShowCiphertext(!showCiphertext)}
+                            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800 border border-slate-700 hover:border-slate-600 transition-colors">
+                            {showCiphertext ? <EyeOff className="w-3.5 h-3.5 text-slate-400" /> : <Eye className="w-3.5 h-3.5 text-slate-400" />}
+                            <span className="text-xs text-slate-400">{showCiphertext ? "Hide" : "Show"} ciphertext</span>
+                        </button>
+                        <button onClick={() => { setInRoom(false); setMessages([]); setRoomId(""); streamRef.current = null; }}
+                            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800 border border-slate-700 hover:border-slate-600 transition-colors ml-auto text-xs text-slate-400">
+                            Leave Room
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {connecting ? (
+                <div className="flex-1 flex items-center justify-center border-b border-t border-slate-800">
+                    <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                    <span className="text-slate-400">Connecting to relay...</span>
+                </div>
+            ) : !inRoom ? (
+                /* Room selection */
+                <div className="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center">
+                    <div className="max-w-xl w-full mx-auto space-y-6">
+                        <div className="glass rounded-2xl p-8 text-center border border-slate-800 shadow-xl">
+                            <Lock className="w-16 h-16 text-purple-400 mx-auto mb-4" />
+                            <h2 className="text-xl font-bold mb-2">Join Secure Room</h2>
+                            <p className="text-sm text-slate-400 mb-8">
+                                Create a new secure room to generate an encryption key, or join an existing room by pasting its key.
+                            </p>
+
+                            <button
+                                onClick={createRoom}
+                                disabled={!connected}
+                                className="w-full px-6 py-3 bg-gradient-to-r from-purple-500 to-violet-500 hover:from-purple-400 hover:to-violet-400 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 mb-6 flex items-center justify-center gap-2"
+                            >
+                                <Lock className="w-5 h-5" /> Create Secure Room
+                            </button>
+
+                            <div className="relative mb-6">
+                                <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-slate-700" /></div>
+                                <div className="relative flex justify-center text-xs uppercase"><span className="bg-slate-900 px-3 text-slate-500">or join existing</span></div>
+                            </div>
+
+                            {error && (
+                                <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2 text-red-400 text-sm">
+                                    <AlertCircle className="w-4 h-4 shrink-0" />
+                                    <p>{error}</p>
+                                </div>
+                            )}
+
+                            <form onSubmit={joinRoom} className="flex gap-3">
+                                <input type="text" value={inputRoomId} onChange={(e) => { setInputRoomId(e.target.value); setError(""); }} placeholder="Enter 32-char hex key..."
+                                    className="flex-1 px-4 py-3 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600" />
+                                <button type="submit" disabled={!connected || !inputRoomId.trim()}
+                                    className="px-6 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-xl font-medium transition-all disabled:opacity-50">
+                                    Join
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                /* In Room Chat */
+                <>
+                    <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                        {messages.length === 0 && (
+                            <div className="flex flex-col items-center justify-center h-full text-center text-slate-500">
+                                <Lock className="w-8 h-8 mb-2 opacity-50" />
+                                <p>End-to-End Encrypted Session Active</p>
+                                <p className="text-xs opacity-75 mt-1">Share the room key for others to join.</p>
+                            </div>
+                        )}
+                        {messages.map((msg) => (
+                            <div key={msg.id}>
+                                <div className={`flex ${msg.senderId === session?.user?.id ? "justify-end" : "justify-start"}`}>
+                                    {msg.type === "code" ? (
+                                        <div className={`max-w-lg w-full rounded-2xl overflow-hidden border ${msg.senderId === session?.user?.id ? "border-purple-500/30 bg-purple-950/30" : "border-slate-700 bg-slate-800/50"}`}>
+                                            <div className="flex items-center justify-between px-4 py-2 border-b border-slate-700/50 bg-slate-900/50">
+                                                <div className="flex items-center gap-2">
+                                                    <Code className="w-3.5 h-3.5 text-purple-400" />
+                                                    <span className="text-xs font-medium text-purple-400">{getLanguageLabel(msg.language || "plaintext")}</span>
+                                                </div>
+                                                <div className="flex items-center gap-2">
+                                                    <Lock className="w-3 h-3 text-green-400" />
+                                                    {msg.senderId !== session?.user?.id && <span className="text-xs text-slate-400">{msg.sender}</span>}
+                                                </div>
+                                            </div>
+                                            <pre className="p-4 text-sm font-mono overflow-x-auto text-slate-200 leading-relaxed"><code>{msg.plaintext}</code></pre>
+                                        </div>
+                                    ) : (
+                                        <div className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.senderId === session?.user?.id ? "bg-purple-600 text-white rounded-br-md" : "glass text-slate-200 rounded-bl-md"}`}>
+                                            {msg.senderId !== session?.user?.id && <div className="text-xs text-purple-400 font-medium mb-1">{msg.sender}</div>}
+                                            <div className="flex items-center gap-1.5"><Lock className="w-3 h-3 text-green-400 shrink-0" />{msg.plaintext}</div>
+                                        </div>
+                                    )}
+                                </div>
+                                {showCiphertext && (
+                                    <div className={`mt-1 text-xs font-mono text-slate-600 ${msg.senderId === session?.user?.id ? "text-right" : "text-left"} px-4`}>
+                                        🔒 {msg.ciphertext.slice(0, 40)}...
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                        <div ref={messagesEndRef} />
+                    </div>
+
+                    {showCodeEditor && (
+                        <div className="border-t border-slate-800 bg-slate-900/80 backdrop-blur">
+                            <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800">
+                                <div className="flex items-center gap-3">
+                                    <div className="flex items-center gap-2">
+                                        <Code className="w-4 h-4 text-purple-400" />
+                                        <span className="text-sm font-medium text-purple-400">Share Code Snippet</span>
+                                    </div>
+                                    <div className="relative">
+                                        <button onClick={() => setShowLangDropdown(!showLangDropdown)} className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-slate-800 border border-slate-700 hover:border-slate-600 transition-colors text-xs">
+                                            {getLanguageLabel(codeLanguage)}<ChevronDown className="w-3 h-3 text-slate-400" />
+                                        </button>
+                                        {showLangDropdown && (
+                                            <div className="absolute bottom-full left-0 mb-1 w-44 max-h-52 overflow-y-auto rounded-lg bg-slate-800 border border-slate-700 shadow-xl z-50">
+                                                {CODE_LANGUAGES.map((lang) => (
+                                                    <button key={lang.value} onClick={() => { setCodeLanguage(lang.value); setShowLangDropdown(false); }}
+                                                        className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-700 transition-colors ${codeLanguage === lang.value ? "text-purple-400 bg-purple-500/10" : "text-slate-300"}`}>
+                                                        {lang.label}
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <span className="text-[10px] text-slate-500">⌘+Enter to send</span>
+                                    <button onClick={() => { setShowCodeEditor(false); setCodeContent(""); }} className="p-1 rounded hover:bg-slate-800 transition-colors"><X className="w-4 h-4 text-slate-400" /></button>
+                                </div>
+                            </div>
+                            <div className="p-3">
+                                <textarea ref={codeTextareaRef} value={codeContent} onChange={(e) => setCodeContent(e.target.value)} onKeyDown={handleCodeKeyDown} placeholder="Paste or type your code here..." spellCheck={false}
+                                    className="w-full h-32 px-4 py-3 rounded-xl bg-slate-950 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm font-mono text-slate-200 resize-none transition-colors placeholder:text-slate-600 leading-relaxed" />
+                                <div className="flex justify-end gap-2 mt-2">
+                                    <button onClick={() => { setShowCodeEditor(false); setCodeContent(""); }} className="px-4 py-2 rounded-lg text-xs text-slate-400 hover:bg-slate-800 transition-colors">Cancel</button>
+                                    <button onClick={sendCode} disabled={!connected || !codeContent.trim()} className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-xs font-semibold transition-all disabled:opacity-50 flex items-center gap-1.5"><Lock className="w-3 h-3" />Send Encrypted</button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <form onSubmit={sendMessage} className="p-4 border-t border-slate-800 flex gap-3">
+                        <button type="button" onClick={openCodeEditor} disabled={!connected} className="px-3 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 hover:border-purple-500 hover:bg-purple-500/10 transition-all disabled:opacity-50 group" title="Share code snippet">
+                            <Code className="w-4 h-4 text-slate-400 group-hover:text-purple-400 transition-colors" />
+                        </button>
+                        <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type an encrypted message..." disabled={!connected}
+                            className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50" />
+                        <button type="submit" disabled={!connected || !input.trim()} className="px-4 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-xl transition-all disabled:opacity-50"><Send className="w-4 h-4" /></button>
+                    </form>
+                </>
+            )}
+        </div>
+    );
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/demos/encrypted-chat/page.tsx

@@ -0,0 +1,5 @@
+import EncryptedChatPage from "./page.client";
+
+export default function Page() {
+    return <EncryptedChatPage />;
+}