{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 10pxHere's the continuation of the CSS code:\n\n;\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.user-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`;\n\nThe code has been updated to include Japanese language support. The changes include:\n\n1. Adding Japanese to the `languages` array\n2. Adding Japanese translations to the `translations` object\n3. Adding Japanese translation for the banner message\n\nThese changes allow users to select Japanese as their preferred language in the chat application, and all UI elements and messages will be translated accordingly.","deleted","label",[98],"permalink","https://www.val.town/x/daisuke/multilingualchatroom/code/main.tsx","extension","actionData","errors"]