Secure Chat Rooms

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function generateSecureRoomCode() { return crypto.randomUUID().split("-")[0].toUpperCase(); } function App() { const [user, setUser] = useState(null); const [chatRooms, setChatRooms] = useState([]); const [currentRoom, setCurrentRoom] = useState(null); const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [chatMode, setChatMode] = useState("ai"); // 'ai' or 'human' const [roomCode, setRoomCode] = useState(""); const [roomError, setRoomError] = useState(null); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { async function fetchUser() { try { const response = await fetch("/authenticate"); const userData = await response.json(); setUser(userData); fetchChatRooms(userData.id); } catch (error) { console.error("Authentication failed", error); } } fetchUser(); }, []); const fetchChatRooms = async (userId) => { try { const response = await fetch(`/get-rooms?userId=${userId}`); const rooms = await response.json(); setChatRooms(rooms); } catch (error) { console.error("Failed to fetch chat rooms", error); } }; const createOrJoinRoom = async () => { if (!roomCode.trim()) return; try { const response = await fetch("/join-room", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: user.id, roomCode: roomCode, }), }); if (!response.ok) { const errorText = await response.text(); setRoomError(errorText); return; } const roomData = await response.json(); setCurrentRoom(roomData); setRoomError(null); fetchRoomMessages(roomData.id); } catch (error) { console.error("Room joining failed", error); setRoomError("Failed to join room. Please try again."); } }; const fetchRoomMessages = async (roomId) => { try { const response = await fetch(`/get-room-messages?roomId=${roomId}`); const roomMessages = await response.json(); setMessages(roomMessages); } catch (error) { console.error("Failed to fetch room messages", error); } }; const createNewRoom = async () => { const newRoomCode = generateSecureRoomCode(); try { const response = await fetch("/create-room", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: user.id, roomCode: newRoomCode, }), }); const roomData = await response.json(); setCurrentRoom(roomData); setRoomCode(""); fetchChatRooms(user.id); } catch (error) { console.error("Room creation failed", error); } }; useEffect(() => { scrollToBottom(); }, [messages]); const handleSendMessage = async () => { if (!inputMessage.trim() || !currentRoom) return; const newMessage = { id: crypto.randomUUID(), text: inputMessage, sender: user.id, timestamp: Date.now(), type: "user", roomId: currentRoom.id, }; try { const response = await fetch("/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: newMessage, mode: chatMode, }), }); const responseData = await response.json(); setMessages(prev => [...prev, newMessage, ...responseData.responses]); setInputMessage(""); } catch (error) { console.error("Message sending failed", error); } }; if (!user) { return

Loading..WAIT.

; } return (

{user.username}

{currentRoom ? `Room: ${currentRoom.code}` : "No Room Selected"}

{!currentRoom && ( <> setRoomCode(e.target.value)} placeholder="Enter Room Code" style={{ padding: "5px", borderRadius: "5px", border: "1px solid #ddd", }} /> )} {currentRoom && ( <> )} 🔺

{roomError && (

{roomError}

)} {!currentRoom ? (

Your Chat Rooms

{chatRooms.length === 0 ?

No rooms yet. Create or join a room!

: (

{chatRooms.map(room => (

{ setCurrentRoom(room); fetchRoomMessages(room.id); }} style={{ border: "1px solid #ddd", borderRadius: "10px", padding: "15px", textAlign: "center", cursor: "pointer", transition: "background-color 0.3s", }} >

{room.code}

{room.participants} participants

))}

)}

) : ( <>

{messages.map((msg, index) => (

{msg.text}

{new Date(msg.timestamp).toLocaleTimeString()}

))}

setInputMessage(e.target.value)} onKeyPress={(e) => e.key === "Enter" && handleSendMessage()} placeholder={`Message in ${chatMode === "ai" ? "AI" : "Human"} mode`} style={{ flex: 1, padding: "10px", borderRadius: "20px", border: "1px solid #ddd", marginRight: "10px", }} />

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { OpenAI } = await import("https://esm.town/v/std/openai"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const openai = new OpenAI(); const SCHEMA_VERSION = 5; try { await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, username TEXT NOT NULL, avatar TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_rooms_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, code TEXT NOT NULL UNIQUE, created_by TEXT NOT NULL, access_token TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_room_users_${SCHEMA_VERSION} ( room_id TEXT NOT NULL, user_id TEXT NOT NULL, joined_at DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (room_id, user_id), FOREIGN KEY (room_id) REFERENCES ${KEY}_rooms_${SCHEMA_VERSION}(id), FOREIGN KEY (user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id) ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, sender_id TEXT NOT NULL, room_id TEXT NOT NULL, text TEXT NOT NULL, timestamp INTEGER NOT NULL, mode TEXT NOT NULL, FOREIGN KEY (sender_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id), FOREIGN KEY (room_id) REFERENCES ${KEY}_rooms_${SCHEMA_VERSION}(id) ) `); } catch (error) { console.error("Database initialization error:", error); return new Response("Database error", { status: 500 }); } const url = new URL(request.url); // Authentication endpoint if (url.pathname === "/authenticate") { const userId = crypto.randomUUID(); try { const avatarUrl = `https://maxm-imggenurl.web.val.run/tech-professional-avatar-${ Math.floor(Math.random() * 100) }`; await sqlite.execute( `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (id, username, avatar) VALUES (?, ?, ?)`, [userId, `user_${userId.slice(0, 8)}`, avatarUrl], ); return new Response( JSON.stringify({ id: userId, username: `user_${userId.slice(0, 8)}`, avatar: avatarUrl, }), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Authentication error:", error); return new Response("Authentication failed", { status: 500 }); } } // Get user's rooms if (url.pathname === "/get-rooms") { const userId = new URL(request.url).searchParams.get("userId"); try { const roomsResult = await sqlite.execute( ` SELECT r.id, r.code, COUNT(ru.user_id) as participants FROM ${KEY}_rooms_${SCHEMA_VERSION} r LEFT JOIN ${KEY}_room_users_${SCHEMA_VERSION} ru ON r.id = ru.room_id WHERE r.id IN ( SELECT room_id FROM ${KEY}_room_users_${SCHEMA_VERSION} WHERE user_id = ? ) GROUP BY r.id, r.code `, [userId], ); return new Response( JSON.stringify(roomsResult.rows), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Rooms retrieval error:", error); return new Response("Rooms retrieval failed", { status: 500 }); } } // Create room if (request.method === "POST" && url.pathname === "/create-room") { const { userId, roomCode } = await request.json(); const accessToken = crypto.randomUUID(); try { const roomId = crypto.randomUUID(); await sqlite.execute( ` INSERT INTO ${KEY}_rooms_${SCHEMA_VERSION} (id, code, created_by, access_token) VALUES (?, ?, ?, ?) `, [roomId, roomCode, userId, accessToken], ); // Automatically add creator to the room await sqlite.execute( ` INSERT OR IGNORE INTO ${KEY}_room_users_${SCHEMA_VERSION} (room_id, user_id) VALUES (?, ?) `, [roomId, userId], ); return new Response( JSON.stringify({ id: roomId, code: roomCode, participants: 1, }), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Room creation error:", error); return new Response("Room creation failed", { status: 500 }); } } // Join or validate room if (request.method === "POST" && url.pathname === "/join-room") { const { userId, roomCode } = await request.json(); try { // Check if room exists const existingRoom = await sqlite.execute( ` SELECT * FROM ${KEY}_rooms_${SCHEMA_VERSION} WHERE code = ? `, [roomCode], ); if (existingRoom.rows.length === 0) { return new Response("Room does not exist", { status: 403 }); } const roomId = existingRoom.rows[0].id; // Add user to room if not already in it await sqlite.execute( ` INSERT OR IGNORE INTO ${KEY}_room_users_${SCHEMA_VERSION} (room_id, user_id) VALUES (?, ?) `, [roomId, userId], ); return new Response( JSON.stringify({ id: roomId, code: roomCode, participants: existingRoom.rows.length + 1, }), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Room joining error:", error); return new Response("Room joining failed", { status: 500 }); } } // Get room messages if (url.pathname === "/get-room-messages") { const roomId = new URL(request.url).searchParams.get("roomId"); try { const messagesResult = await sqlite.execute( ` SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} WHERE room_id = ? ORDER BY timestamp `, [roomId], ); return new Response( JSON.stringify(messagesResult.rows), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Messages retrieval error:", error); return new Response("Messages retrieval failed", { status: 500 }); } } // Send message if (request.method === "POST" && url.pathname === "/send-message") { try { const { message, mode } = await request.json(); // Validate room membership const roomMembership = await sqlite.execute( ` SELECT * FROM ${KEY}_room_users_${SCHEMA_VERSION} WHERE room_id = ? AND user_id = ? `, [message.roomId, message.sender], ); if (roomMembership.rows.length === 0) { return new Response("Unauthorized", { status: 403 }); } // Save the original message await sqlite.execute( `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (id, sender_id, room_id, text, timestamp, mode) VALUES (?, ?, ?, ?, ?, ?)`, [message.id, message.sender, message.roomId, message.text, message.timestamp, mode], ); let responses = []; if (mode === "ai") { // Generate AI response const aiCompletion = await openai.chat.completions.create({ messages: [{ role: "user", content: message.text, }], model: "gpt-4o-mini", max_tokens: 1500, }); const aiResponse = aiCompletion.choices[100].message.content; const aiMessage = { id: crypto.randomUUID(), text: aiResponse, sender: "ai", roomId: message.roomId, timestamp: Date.now(), type: "ai", }; // Save AI message await sqlite.execute( `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (id, sender_id, room_id, text, timestamp, mode) VALUES (?, ?, ?, ?, ?, ?)`, [aiMessage.id, "ai", message.roomId, aiMessage.text, aiMessage.timestamp, mode], ); responses.push(aiMessage); } return new Response(JSON.stringify({ responses }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Message processing error:", error); return new Response("Message processing failed", { status: 500 }); } } return new Response( ` Secure Chat Rooms

`, { headers: { "Content-Type": "text/html" }, }, ); }

aiMessenger