@sansavision/create-pulse 0.4.4 → 0.4.5

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

@@ -3,12 +3,13 @@
 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 } from "lucide-react";
+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;
@@ -37,6 +38,15 @@ export default function EncryptedChatPage() {
     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);
@@ -44,17 +54,19 @@ export default function EncryptedChatPage() {
     const [codeContent, setCodeContent] = useState("");
     const [codeLanguage, setCodeLanguage] = useState("javascript");
     const [showLangDropdown, setShowLangDropdown] = useState(false);
-    const [encryptionKey] = useState(() =>
-        Array.from(crypto.getRandomValues(new Uint8Array(16)))
-            .map((b) => b.toString(16).padStart(2, "0")).join("")
-    );
+
     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) =>
@@ -69,6 +81,7 @@ export default function EncryptedChatPage() {
         ).join("");
     }
 
+    // Connect to relay
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -77,7 +90,6 @@ export default function EncryptedChatPage() {
             try {
                 const connection = await connectWithAuth();
                 if (cancelled) return;
-
                 connRef.current = connection;
                 setConnected(true);
                 setConnecting(false);
@@ -86,31 +98,6 @@ export default function EncryptedChatPage() {
                 const user = (connection as any).user;
                 if (user) setAuthUser(user);
 
-                const stream = connection.stream("encrypted-room");
-
-                // Listen for messages (skip self-echoes — we add our own messages locally)
-                stream.on("data", (data: Uint8Array) => {
-                    try {
-                        const msg = JSON.parse(new TextDecoder().decode(data));
-                        const selfName = session?.user?.name || "Anonymous";
-                        if ((msg.type === "encrypted-msg" || msg.type === "encrypted-code") && msg.sender !== selfName) {
-                            const decrypted = simpleDecrypt(msg.ciphertext, encryptionKey);
-                            setMessages((prev) => [
-                                ...prev,
-                                {
-                                    id: crypto.randomUUID(),
-                                    sender: msg.sender,
-                                    plaintext: decrypted,
-                                    ciphertext: msg.ciphertext,
-                                    timestamp: Date.now(),
-                                    type: msg.type === "encrypted-code" ? "code" : "text",
-                                    language: msg.language,
-                                },
-                            ]);
-                        }
-                    } catch { /* ignore */ }
-                });
-
                 connection.on("disconnect", () => setConnected(false));
                 connection.on("reconnected", () => setConnected(true));
             } catch (err) {
@@ -118,77 +105,147 @@ export default function EncryptedChatPage() {
                 setConnecting(false);
             }
         }
-
         init();
         return () => {
             cancelled = true;
             connRef.current?.disconnect();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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() || !connRef.current) return;
+        if (!input.trim() || !streamRef.current || !inRoom) return;
 
         const plaintext = input.trim();
-        const ciphertext = simpleEncrypt(plaintext, encryptionKey);
+        const ciphertext = simpleEncrypt(plaintext, roomId);
         const sender = session?.user?.name || "Anonymous";
+        const senderId = session?.user?.id || "unknown";
 
-        const stream = connRef.current.stream("encrypted-room");
-        stream.send(JSON.stringify({ type: "encrypted-msg", sender, ciphertext }));
+        streamRef.current.send(JSON.stringify({ type: "encrypted-msg", sender, senderId, ciphertext }));
 
-        // Add to local state immediately (relay echoes, but we filter self in on("data"))
         setMessages((prev) => [
             ...prev,
-            {
-                id: crypto.randomUUID(),
-                sender,
-                plaintext,
-                ciphertext,
-                timestamp: Date.now(),
-                type: "text",
-            },
+            { id: crypto.randomUUID(), sender, senderId, plaintext, ciphertext, timestamp: Date.now(), type: "text" },
         ]);
         setInput("");
     }
 
     function sendCode() {
-        if (!codeContent.trim() || !connRef.current) return;
+        if (!codeContent.trim() || !streamRef.current || !inRoom) return;
 
         const plaintext = codeContent.trim();
-        const ciphertext = simpleEncrypt(plaintext, encryptionKey);
+        const ciphertext = simpleEncrypt(plaintext, roomId);
         const sender = session?.user?.name || "Anonymous";
+        const senderId = session?.user?.id || "unknown";
 
-        const stream = connRef.current.stream("encrypted-room");
-        stream.send(JSON.stringify({
+        streamRef.current.send(JSON.stringify({
             type: "encrypted-code",
             sender,
+            senderId,
             ciphertext,
             language: codeLanguage,
         }));
 
-        // Add to local state immediately
         setMessages((prev) => [
             ...prev,
-            {
-                id: crypto.randomUUID(),
-                sender,
-                plaintext,
-                ciphertext,
-                timestamp: Date.now(),
-                type: "code",
-                language: codeLanguage,
-            },
+            { id: crypto.randomUUID(), sender, senderId, plaintext, ciphertext, timestamp: Date.now(), type: "code", language: codeLanguage },
         ]);
         setCodeContent("");
         setShowCodeEditor(false);
     }
 
     function handleCodeKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-        // Handle Tab key for indentation
         if (e.key === "Tab") {
             e.preventDefault();
             const textarea = e.currentTarget;
@@ -196,12 +253,8 @@ export default function EncryptedChatPage() {
             const end = textarea.selectionEnd;
             const newValue = codeContent.substring(0, start) + "  " + codeContent.substring(end);
             setCodeContent(newValue);
-            // Set cursor position after the tab
-            setTimeout(() => {
-                textarea.selectionStart = textarea.selectionEnd = start + 2;
-            }, 0);
+            setTimeout(() => { textarea.selectionStart = textarea.selectionEnd = start + 2; }, 0);
         }
-        // Cmd/Ctrl+Enter to send
         if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
             sendCode();
@@ -213,8 +266,7 @@ export default function EncryptedChatPage() {
         setTimeout(() => codeTextareaRef.current?.focus(), 100);
     }
 
-    const getLanguageLabel = (val: string) =>
-        CODE_LANGUAGES.find((l) => l.value === val)?.label || val;
+    const getLanguageLabel = (val: string) => CODE_LANGUAGES.find((l) => l.value === val)?.label || val;
 
     return (
         <div className="h-screen flex flex-col">
@@ -226,7 +278,7 @@ export default function EncryptedChatPage() {
                         </div>
                         <div>
                             <h1 className="text-lg font-semibold">E2E Encrypted Chat</h1>
-                            <p className="text-xs text-slate-500">Messages encrypted before leaving your browser</p>
+                            <p className="text-xs text-slate-500">Secure end-to-end messaging</p>
                         </div>
                     </div>
                     <div className="flex items-center gap-3">
@@ -244,168 +296,177 @@ export default function EncryptedChatPage() {
                     </div>
                 </div>
 
-                <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">
-                        <Key className="w-3.5 h-3.5 text-purple-400" />
-                        <code className="text-xs text-purple-400 font-mono">{encryptionKey.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>
+                {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>
-                    <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>
-                </div>
+                )}
             </div>
 
-            <div className="flex-1 overflow-y-auto p-4 space-y-3">
-                {connecting && (
-                    <div className="flex items-center justify-center py-20">
-                        <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" /><span className="text-slate-400">Establishing encrypted channel...</span>
-                    </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>
 
-                {messages.map((msg) => (
-                    <div key={msg.id}>
-                        <div className={`flex ${msg.sender === session?.user?.name ? "justify-end" : "justify-start"}`}>
-                            {msg.type === "code" ? (
-                                /* Code snippet message */
-                                <div className={`max-w-lg w-full rounded-2xl overflow-hidden border ${msg.sender === session?.user?.name
-                                    ? "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.sender !== session?.user?.name && (
-                                                <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>
-                            ) : (
-                                /* Normal text message */
-                                <div className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.sender === session?.user?.name ? "bg-purple-600 text-white rounded-br-md" : "glass text-slate-200 rounded-bl-md"}`}>
-                                    {msg.sender !== session?.user?.name && <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>
+                            <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>
-                        {showCiphertext && (
-                            <div className={`mt-1 text-xs font-mono text-slate-600 ${msg.sender === session?.user?.name ? "text-right" : "text-left"} px-4`}>
-                                🔒 {msg.ciphertext.slice(0, 40)}...
-                            </div>
-                        )}
                     </div>
-                ))}
-                <div ref={messagesEndRef} />
-            </div>
-
-            {/* Code Editor Panel */}
-            {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>
+            ) : (
+                /* 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>
-                            {/* Language selector */}
-                            <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>
-                                        ))}
+                        )}
+                        {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>
-                        <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 ref={messagesEndRef} />
                     </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 disabled:cursor-not-allowed flex items-center gap-1.5"
-                            >
-                                <Lock className="w-3 h-3" />
-                                Send Encrypted
-                            </button>
+
+                    {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>
-                    </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>
+                </>
             )}
-
-            {/* Message input */}
-            <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 disabled:cursor-not-allowed 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 disabled:cursor-not-allowed">
-                    <Send className="w-4 h-4" />
-                </button>
-            </form>
         </div>
     );
 }