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

; } 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: 150 }); const aiResponse = aiCompletion.choices[0].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" }, }, ); }

tesla6940