/** @jsxImportSource https://esm.sh/react */ import { nanoid } from "https://esm.sh/nanoid"; import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const languages = [ { code: "en", name: "English" }, { code: "fr", name: "French" }, { code: "es", name: "Spanish" }, { code: "de", name: "German" }, { code: "it", name: "Italian" }, ]; const translations = { en: { title: "Multilingual Chat Room", usernameLabel: "Username:", usernamePlaceholder: "Enter your username", pendingUsernameMessage: "Send a message to update your username", messagePlaceholder: "Type a message...", sendButton: "Send", usersInRoom: "Users in the room:", shareUrl: "Share this URL with friends:", copyButton: "Copy", copiedMessage: "Copied!", selectLanguage: "Select your language:", isTyping: "is typing...", }, fr: { title: "Salle de Chat Multilingue", usernameLabel: "Nom d'utilisateur :", usernamePlaceholder: "Entrez votre nom d'utilisateur", pendingUsernameMessage: "Envoyez un message pour mettre à jour votre nom d'utilisateur", messagePlaceholder: "Tapez un message...", sendButton: "Envoyer", usersInRoom: "Utilisateurs dans la salle :", shareUrl: "Partagez cette URL avec vos amis :", copyButton: "Copier", copiedMessage: "Copié !", selectLanguage: "Sélectionnez votre langue :", isTyping: "est en train d'écrire...", }, es: { title: "Sala de Chat Multilingüe", usernameLabel: "Nombre de usuario:", usernamePlaceholder: "Ingrese su nombre de usuario", pendingUsernameMessage: "Envíe un mensaje para actualizar su nombre de usuario", messagePlaceholder: "Escriba un mensaje...", sendButton: "Enviar", usersInRoom: "Usuarios en la sala:", shareUrl: "Comparta esta URL con amigos:", copyButton: "Copiar", copiedMessage: "¡Copiado!", selectLanguage: "Seleccione su idioma:", isTyping: "está escribiendo...", }, de: { title: "Mehrsprachiger Chatraum", usernameLabel: "Benutzername:", usernamePlaceholder: "Geben Sie Ihren Benutzernamen ein", pendingUsernameMessage: "Senden Sie eine Nachricht, um Ihren Benutzernamen zu aktualisieren", messagePlaceholder: "Geben Sie eine Nachricht ein...", sendButton: "Senden", usersInRoom: "Benutzer im Raum:", shareUrl: "Teilen Sie diese URL mit Freunden:", copyButton: "Kopieren", copiedMessage: "Kopiert!", selectLanguage: "Wählen Sie Ihre Sprache:", isTyping: "tippt gerade...", }, it: { title: "Sala Chat Multilingue", usernameLabel: "Nome utente:", usernamePlaceholder: "Inserisci il tuo nome utente", pendingUsernameMessage: "Invia un messaggio per aggiornare il tuo nome utente", messagePlaceholder: "Scrivi un messaggio...", sendButton: "Invia", usersInRoom: "Utenti nella stanza:", shareUrl: "Condividi questo URL con gli amici:", copyButton: "Copia", copiedMessage: "Copiato!", selectLanguage: "Seleziona la tua lingua:", isTyping: "sta scrivendo...", }, }; const bannerMessages = { en: "Click and hold on foreign messages to see the original language.", fr: "Cliquez et maintenez sur les messages étrangers pour voir la langue d'origine.", es: "Haga clic y mantenga presionado en los mensajes extranjeros para ver el idioma original.", de: "Klicken und halten Sie fremdsprachige Nachrichten, um die Originalsprache zu sehen.", it: "Clicca e tieni premuto sui messaggi stranieri per vedere la lingua originale.", }; function Banner({ message, isVisible, language }) { if (!isVisible) return null; return

{message[language] || message.en}

; } function UserList({ users, t }) { return (

{t.usersInRoom}

{user.username} - {languages.find(lang => lang.code === user.language)?.name || user.language}

); } function Sidebar({ users, language, handleLanguageChange, roomUrl, copyToClipboard, copied, t }) { return (

{t.shareUrl}

e.target.select()} /> {copied && {t.copiedMessage}}

{t.selectLanguage}

); } function TypingIndicator({ typingUsers, t }) { if (typingUsers.length === 0) return null; return (

{typingUsers.map((user, index) => ( {user} {t.isTyping} {index < typingUsers.length - 1 ? ', ' : ''} ))}

); } function App() { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [username, setUsername] = useState(""); const [pendingUsername, setPendingUsername] = useState(""); const [roomId, setRoomId] = useState(""); const [language, setLanguage] = useState("en"); const [copied, setCopied] = useState(false); const [heldMessageId, setHeldMessageId] = useState(null); const [showBanner, setShowBanner] = useState(false); const [hasSeenOtherUserMessage, setHasSeenOtherUserMessage] = useState(false); const [translatedBannerMessage, setTranslatedBannerMessage] = useState(bannerMessages); const [users, setUsers] = useState([]); const [typingUsers, setTypingUsers] = useState([]); const t = translations[language]; useEffect(() => { const urlParams = new URLSearchParams(window.location.search); const roomFromUrl = urlParams.get("room"); if (roomFromUrl) { setRoomId(roomFromUrl); } else { const newRoomId = nanoid(10); setRoomId(newRoomId); window.history.pushState({}, "", `?room=${newRoomId}`); } }, []); useEffect(() => { if (roomId) { const fetchDefaultUsername = async () => { try { // First, check if there's a username in localStorage const storedUsername = localStorage.getItem('chatUsername'); if (storedUsername) { setUsername(storedUsername); } else { // If not, fetch a default username from the server const response = await fetch(`/default-username?room=${roomId}`); if (response.ok) { const defaultUsername = await response.text(); setUsername(defaultUsername); // Store the username in localStorage localStorage.setItem('chatUsername', defaultUsername); } } // Check if there's a language in localStorage const storedLanguage = localStorage.getItem('chatLanguage'); if (storedLanguage) { setLanguage(storedLanguage); } } catch (error) { console.error("Error fetching default username:", error); } }; fetchDefaultUsername(); } }, [roomId]); useEffect(() => { if (roomId) { const pollMessages = async () => { try { const response = await fetch(`/messages?room=${roomId}&language=${language}`); if (response.ok) { const newMessages = await response.json(); setMessages(newMessages); if (!hasSeenOtherUserMessage && newMessages.some(msg => msg.username !== username)) { setHasSeenOtherUserMessage(true); setShowBanner(true); setTimeout(() => setShowBanner(false), 5000); } } } catch (error) { console.error("Error fetching messages:", error); } }; const fetchUsers = async () => { try { const response = await fetch(`/users?room=${roomId}`); if (response.ok) { const userList = await response.json(); setUsers(userList); } } catch (error) { console.error("Error fetching users:", error); } }; const fetchTypingUsers = async () => { try { const response = await fetch(`/typing-users?room=${roomId}`); if (response.ok) { const typingUsersList = await response.json(); setTypingUsers(typingUsersList.filter(user => user !== username)); } } catch (error) { console.error("Error fetching typing users:", error); } }; pollMessages(); fetchUsers(); fetchTypingUsers(); const messageIntervalId = setInterval(pollMessages, 2000); const userIntervalId = setInterval(fetchUsers, 5000); const typingIntervalId = setInterval(fetchTypingUsers, 1000); return () => { clearInterval(messageIntervalId); clearInterval(userIntervalId); clearInterval(typingIntervalId); }; } }, [roomId, language, username, hasSeenOtherUserMessage]); useEffect(() => { const translateBannerMessage = async () => { if (language !== "en") { try { const translatedMessage = await fetch("/translate-text", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: bannerMessages.en, targetLanguage: language, sourceLanguage: "en", }), }).then(res => res.text()); setTranslatedBannerMessage(prev => ({ ...prev, [language]: translatedMessage, })); } catch (error) { console.error("Error translating banner message:", error); } } }; translateBannerMessage(); }, [language]); const sendMessage = async () => { if (inputMessage && roomId && username) { try { const response = await fetch("/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ room: roomId, username, content: inputMessage, language, newUsername: pendingUsername || undefined, }), }); if (response.ok) { setInputMessage(""); if (pendingUsername) { setUsername(pendingUsername); setPendingUsername(""); // Update username in localStorage localStorage.setItem('chatUsername', pendingUsername); } } } catch (error) { console.error("Error sending message:", error); } } }; const updateUser = async (newUsername, newLanguage) => { if (newUsername !== username) { setPendingUsername(newUsername); } else { try { const response = await fetch("/update-user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ room: roomId, oldUsername: username, newUsername, newLanguage }), }); if (response.ok) { setLanguage(newLanguage); // Update username and language in localStorage localStorage.setItem('chatUsername', newUsername); localStorage.setItem('chatLanguage', newLanguage); } } catch (error) { console.error("Error updating user:", error); } } }; const copyToClipboard = useCallback(() => { const el = document.createElement("textarea"); el.value = window.location.href; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); setCopied(true); setTimeout(() => setCopied(false), 2000); }, []); const handleMouseDown = (messageId) => { setHeldMessageId(messageId); }; const handleMouseUp = () => { setHeldMessageId(null); }; const handleUsernameChange = (e) => { const newUsername = e.target.value; updateUser(newUsername, language); }; const handleLanguageChange = (e) => { const newLanguage = e.target.value; updateUser(username, newLanguage); // Save the new language to localStorage localStorage.setItem('chatLanguage', newLanguage); }; const handleInputChange = (e) => { setInputMessage(e.target.value); updateTypingStatus(true); }; const updateTypingStatus = useCallback( async (isTyping) => { if (roomId && username) { try { await fetch("/update-typing", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ room: roomId, username, isTyping }), }); } catch (error) { console.error("Error updating typing status:", error); } } }, [roomId, username] ); useEffect(() => { const typingTimer = setTimeout(() => { updateTypingStatus(false); }, 2000); return () => clearTimeout(typingTimer); }, [inputMessage, updateTypingStatus]); return (

{t.title}

{t.usernameLabel} {pendingUsername && {t.pendingUsernameMessage}}

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

handleMouseDown(index)} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} > {msg.username}:{" "} {heldMessageId === index ? msg.content : msg.translatedContent || msg.content}

))}

e.key === "Enter" && sendMessage()} placeholder={t.messagePlaceholder} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); const { blob } = await import("https://esm.town/v/std/blob"); const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); // Simple rate limiting const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const RATE_LIMIT_KEY = `${KEY}_rate_limit`; const MAX_REQUESTS = 20; const TIME_WINDOW = 60 * 1000; // 1 minute async function checkRateLimit() { const now = Date.now(); const rateLimit = await blob.getJSON(RATE_LIMIT_KEY) || { count: 0, timestamp: now }; if (now - rateLimit.timestamp > TIME_WINDOW) { rateLimit.count = 1; rateLimit.timestamp = now; } else { rateLimit.count++; } await blob.setJSON(RATE_LIMIT_KEY, rateLimit); return rateLimit.count <= MAX_REQUESTS; } async function translateText(text: string, targetLanguage: string, sourceLanguage: string): Promise { const cacheKey = `${KEY}_translation_${sourceLanguage}_${targetLanguage}_${text}`; const cachedTranslation = await blob.getJSON(cacheKey); if (cachedTranslation) { return cachedTranslation; } if (!(await checkRateLimit())) { console.log("Rate limit exceeded. Skipping translation."); return text; } try { const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `You are a translator. Translate the following text from ${sourceLanguage} to ${targetLanguage}. Only respond with the translated text, nothing else.`, }, { role: "user", content: text }, ], model: "gpt-4o-mini", max_tokens: 150, }); const translatedText = completion.choices[0].message.content || text; await blob.setJSON(cacheKey, translatedText); return translatedText; } catch (error) { console.error("Translation error:", error); return text; } } if (url.pathname === "/default-username") { const roomId = url.searchParams.get("room"); if (!roomId) { return new Response("Room ID is required", { status: 400 }); } const userCountKey = `${KEY}_user_count_${roomId}`; let userCount = await blob.getJSON(userCountKey) || 0; userCount++; await blob.setJSON(userCountKey, userCount); return new Response(`Guest${userCount}`); } if (url.pathname === "/messages") { const roomId = url.searchParams.get("room"); const targetLanguage = url.searchParams.get("language") || "en"; if (!roomId) { return new Response("Room ID is required", { status: 400 }); } const messages = await blob.getJSON(`chat_room_${roomId}`) || []; // Translate messages if they're not in the user's selected language const translatedMessages = await Promise.all(messages.map(async (msg) => { if (msg.language !== targetLanguage) { msg.translatedContent = await translateText(msg.content, targetLanguage, msg.language); } return msg; })); return new Response(JSON.stringify(translatedMessages), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/send-message" && request.method === "POST") { const { room, username, content, language, newUsername } = await request.json(); if (!room || !username || !content || !language) { return new Response("Room, username, content, and language are required", { status: 400 }); } const messages = await blob.getJSON(`chat_room_${room}`) || []; // Update all prior messages if there's a username change if (newUsername && newUsername !== username) { messages.forEach(msg => { if (msg.username === username) { msg.username = newUsername; } }); } messages.push({ username: newUsername || username, content, language, timestamp: new Date().toISOString() }); await blob.setJSON(`chat_room_${room}`, messages.slice(-100)); // Keep only last 100 messages // Update users list const usersKey = `${KEY}_users_${room}`; let users = await blob.getJSON(usersKey) || []; const existingUserIndex = users.findIndex(u => u.username === username); if (existingUserIndex !== -1) { users[existingUserIndex] = { username: newUsername || username, language }; } else { users.push({ username: newUsername || username, language }); } await blob.setJSON(usersKey, users); return new Response("Message sent", { status: 200 }); } if (url.pathname === "/update-user" && request.method === "POST") { const { room, oldUsername, newUsername, newLanguage } = await request.json(); if (!room || !oldUsername || !newUsername || !newLanguage) { return new Response("Room, old username, new username, and new language are required", { status: 400 }); } const usersKey = `${KEY}_users_${room}`; let users = await blob.getJSON(usersKey) || []; const existingUserIndex = users.findIndex(u => u.username === oldUsername); if (existingUserIndex !== -1) { users[existingUserIndex] = { username: newUsername, language: newLanguage }; } else { users.push({ username: newUsername, language: newLanguage }); } await blob.setJSON(usersKey, users); return new Response("User updated", { status: 200 }); } if (url.pathname === "/translate-text" && request.method === "POST") { const { text, targetLanguage, sourceLanguage } = await request.json(); if (!text || !targetLanguage || !sourceLanguage) { return new Response("Text, target language, and source language are required", { status: 400 }); } const translatedText = await translateText(text, targetLanguage, sourceLanguage); return new Response(translatedText); } if (url.pathname === "/users") { const roomId = url.searchParams.get("room"); if (!roomId) { return new Response("Room ID is required", { status: 400 }); } const usersKey = `${KEY}_users_${roomId}`; const users = await blob.getJSON(usersKey) || []; return new Response(JSON.stringify(users), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/update-typing" && request.method === "POST") { const { room, username, isTyping } = await request.json(); if (!room || !username) { return new Response("Room and username are required", { status: 400 }); } const typingKey = `${KEY}_typing_${room}`; let typingUsers = await blob.getJSON(typingKey) || []; if (isTyping) { if (!typingUsers.includes(username)) { typingUsers.push(username); } } else { typingUsers = typingUsers.filter(user => user !== username); } await blob.setJSON(typingKey, typingUsers); return new Response("Typing status updated", { status: 200 }); } if (url.pathname === "/typing-users") { const roomId = url.searchParams.get("room"); if (!roomId) { return new Response("Room ID is required", { status: 400 }); } const typingKey = `${KEY}_typing_${roomId}`; const typingUsers = await blob.getJSON(typingKey) || []; return new Response(JSON.stringify(typingUsers), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Multilingual Chat Room

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .username-container { display: flex; flex-direction: column; align-items: flex-start; } .username-container label { margin-bottom: 5px; } .username-input { padding: 5px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; } .pending-username-message { font-size: 12px; color: #666; margin-top: 5px; } .main-content { display: flex; gap: 20px; } .chat-area { flex: 1; display: flex; flex-direction: column; } .chat-box { height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; background-color: white; } .input-area { display: flex; } input[type="text"] { flex-grow: 1; padding: 10px; font-size: 16px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .message { margin-bottom: 10px; padding: 5px; border-radius: 5px; } .message.self { text-align: right; color: blue; } .message.clickable { cursor: pointer; background-color: #f9f9f9; transition: background-color 0.3s ease; } .message.clickable:hover { background-color: #e9e9e9; } .message.held { background-color: #e0e0e0; } .sidebar { width: 250px; padding: 20px; background-color: #e9e9e9; border-radius: 5px; } .language-selector { margin-bottom: 20px; } .language-selector select { width: 100%; padding: 5px; font-size: 16px; } .share-url { margin-bottom: 20px; } .share-link { width: 100%; padding: 5px; margin-bottom: 10px; font-size: 14px; } .copy-button { width: 100%; padding: 5px 10px; font-size: 14px; } .copied-message { color: #4CAF50; font-style: italic; display: block; margin-top: 5px; } .banner { position: fixed; top: 0; left: 0; width: 100%; padding: 10px; background-color: #e6f7ff; color: #0066cc; text-align: center; font-weight: bold; z-index: 1000; animation: fadeInOut 8s ease-in-out forwards; } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } .userHere's the continuation of the code, omitting the starting markdown code fence: -list { margin-bottom: 20px; font-size: 12px; } .user-list h4 { margin-bottom: 5px; } h4 { font-size: 18px; margin-bottom: 8px; } .user-list ul { list-style-type: none; padding: 0; margin: 0; } .user-list li { margin-bottom: 3px; } .typing-indicator { font-size: 14px; color: #666; font-style: italic; margin-bottom: 10px; } `;

multilingualchatroom