{message[language] || message.en}

;\n}\n\nfunction UserList({ users, t }) {\n return (\n

{t.usersInRoom}

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

\n );\n}\n\nfunction Sidebar({ users, language, handleLanguageChange, roomUrl, copyToClipboard, copied, t }) {\n return (\n

\n \n

{t.shareUrl}

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

{t.selectLanguage}

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

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

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

\n \n

{t.title}

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

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

\n ))}\n

\n \n

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

\n \n

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

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