/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [username, setUsername] = useState(""); const messagesEndRef = useRef(null); const lastMessageIdRef = useRef(0); const resetTokenRef = useRef(0); useEffect(() => { fetchMessages(); getOrCreateUsername(); const intervalId = setInterval(() => { fetchNewMessages(); checkReset(); }, 1000); // Poll every second return () => clearInterval(intervalId); }, []); useEffect(() => { scrollToBottom(); }, [messages]); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const getOrCreateUsername = async () => { let storedUsername = localStorage.getItem("chatUsername"); if (!storedUsername) { const response = await fetch("/username"); const data = await response.json(); storedUsername = data.username; localStorage.setItem("chatUsername", storedUsername); } setUsername(storedUsername); }; const fetchMessages = async () => { const response = await fetch("/messages"); const data = await response.json(); setMessages(data); if (data.length > 0) { lastMessageIdRef.current = data[data.length - 1].id; } }; const fetchNewMessages = async () => { const response = await fetch(`/new-messages?lastId=${lastMessageIdRef.current}`); const newMessages = await response.json(); if (newMessages.length > 0) { setMessages(prevMessages => [...prevMessages, ...newMessages]); lastMessageIdRef.current = newMessages[newMessages.length - 1].id; } }; const checkReset = async () => { const response = await fetch(`/check-reset?token=${resetTokenRef.current}`); const data = await response.json(); if (data.reset) { setMessages([]); lastMessageIdRef.current = 0; resetTokenRef.current = data.token; } }; const sendMessage = async (e) => { e.preventDefault(); if (!input.trim()) return; setInput(""); const response = await fetch("/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: input, username }), }); if (response.ok) { fetchNewMessages(); // Immediately fetch new messages after sending } }; const resetChat = async () => { const response = await fetch("/reset", { method: "POST" }); if (response.ok) { setMessages([]); lastMessageIdRef.current = 0; } }; return (

Multi-User Chat with GPT-4o

Your username: {username}

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

{msg.username}: {msg.content}

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { OpenAI } = await import("https://esm.town/v/std/openai"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const openai = new OpenAI(); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, role TEXT NOT NULL, content TEXT NOT NULL, username TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_reset_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, token INTEGER NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "GET" && new URL(request.url).pathname === "/username") { const username = `User${Math.floor(Math.random() * 10000)}`; return new Response(JSON.stringify({ username }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/send") { const { message, username } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content, username) VALUES (?, ?, ?)`, ["user", message, username]); // Fetch recent context const contextResult = await sqlite.execute( `SELECT role, content, username FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY id DESC LIMIT 10` ); const context = contextResult.rows.reverse(); // Prepare messages for the LLM const messages = context.map(msg => ({ role: msg.role === "user" ? "user" : "assistant", content: `${msg.username}: ${msg.content}` })); messages.push({ role: "user", content: `${username}: ${message}` }); const completion = await openai.chat.completions.create({ messages, model: "gpt-4o-mini", max_tokens: 150, }); const aiResponse = completion.choices[0].message.content; await sqlite.execute(`INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content, username) VALUES (?, ?, ?)`, ["assistant", aiResponse, "GPT-4o"]); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "GET" && new URL(request.url).pathname === "/messages") { const result = await sqlite.execute(`SELECT id, role, content, username FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY id ASC`); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "GET" && new URL(request.url).pathname === "/new-messages") { const url = new URL(request.url); const lastId = url.searchParams.get("lastId") || "0"; const result = await sqlite.execute(`SELECT id, role, content, username FROM ${KEY}_messages_${SCHEMA_VERSION} WHERE id > ? ORDER BY id ASC`, [lastId]); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/reset") { await sqlite.execute(`DELETE FROM ${KEY}_messages_${SCHEMA_VERSION}`); const newToken = Date.now(); await sqlite.execute(`INSERT INTO ${KEY}_reset_${SCHEMA_VERSION} (token) VALUES (?)`, [newToken]); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "GET" && new URL(request.url).pathname === "/check-reset") { const url = new URL(request.url); const clientToken = url.searchParams.get("token") || "0"; const result = await sqlite.execute(`SELECT token FROM ${KEY}_reset_${SCHEMA_VERSION} ORDER BY id DESC LIMIT 1`); const latestToken = result.rows[0]?.token || 0; const reset = parseInt(clientToken) < latestToken; return new Response(JSON.stringify({ reset, token: latestToken }), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Multi-User Chat with GPT-4o

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .chat-container { max-width: 600px; margin: 20px auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; display: flex; flex-direction: column; height: 80vh; } h1 { text-align: center; color: #333; margin-top: 0; } .messages-container { flex-grow: 1; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; } .messages { display: flex; flex-direction: column; } .message { margin-bottom: 10px; padding: 5px; border-radius: 5px; max-width: 80%; } .message.user { background-color: #e6f3ff; align-self: flex-end; } .message.assistant { background-color: #f0f0f0; align-self: flex-start; } form { display: flex; margin-bottom: 10px; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #007bff; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } button:hover { background-color: #0056b3; } .reset-button { width: 100%; margin-bottom: 10px; border-radius: 4px; } a { display: block; text-align: center; margin-top: 10px; color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } `;

multiUserChatwithLLM

Version 2