\n );\n};\n\n// User list component\nconst UserList = ({ users }: { users: User[] }) => {\n return (\n

Online Users

\n {users.map((user) => (\n

{user.username}

\n ))}\n

\n );\n};\n\n// Message component\nconst MessageItem = ({ message, currentUserId }: { message: Message, currentUserId: number }) => {\n const isMyMessage = message.userId === currentUserId;\n const messageClass = isMyMessage ? \"my-message\" : \"other-message\";\n \n const formatTime = (timestamp: string) => {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n \n const renderContent = () => {\n switch (message.type) {\n case MessageType.TEXT:\n return

{message.content}

;\n \n case MessageType.IMAGE:\n return (\n $\"Shared$ window.open(`/api/blob/${message.content}`, '_blank')}\n />\n );\n \n case MessageType.VOICE:\n return (\n

\n );\n \n default:\n return

{message.content}

;\n }\n };\n \n return (\n

\n {!isMyMessage &&

{message.username}

}\n {renderContent()}\n

{formatTime(message.timestamp)}

\n );\n};\n\n// Chat component\nconst Chat = ({ user, users, onLogout }: { user: User, users: User[], onLogout: () => void }) => {\n const [messages, setMessages] = useState([]);\n const [inputMessage, setInputMessage] = useState(\"\");\n const [isRecording, setIsRecording] = useState(false);\n const [mediaRecorder, setMediaRecorder] = useState(null);\n const [recordedChunks, setRecordedChunks] = useState([]);\n const messagesEndRef = useRef(null);\n const wsRef = useRef(null);\n \n // Scroll to bottom of messages\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n \n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n \n // Initialize WebSocket connection\n useEffect(() => {\n const connectWebSocket = () => {\n const ws = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws?userId=${user.id}&username=${user.username}`);\n \n ws.onopen = () => {\n console.log('WebSocket connected');\n };\n \n ws.onmessage = (event) => {\n const data = JSON.parse(event.data);\n \n switch (data.type) {\n case WebSocketMessageType.NEW_MESSAGE:\n if (Array.isArray(data.data)) {\n setMessages(data.data);\n } else {\n setMessages(prev => [...prev, data.data]);\n }\n break;\n \n case WebSocketMessageType.USER_LIST:\n // This is handled by the parent component\n break;\n \n case WebSocketMessageType.USER_JOINED:\n case WebSocketMessageType.USER_LEFT:\n // These are handled by the parent component\n break;\n }\n };\n \n ws.onclose = () => {\n console.log('WebSocket disconnected');\n // Try to reconnect after a delay\n setTimeout(connectWebSocket, 3000);\n };\n \n wsRef.current = ws;\n };\n \n connectWebSocket();\n \n // Fetch initial messages\n fetch('/api/messages')\n .then(res => res.json())\n .then(data => {\n if (data.messages) {\n setMessages(data.messages);\n }\n })\n .catch(err => console.error('Error fetching messages:', err));\n \n // Cleanup on unmount\n return () => {\n if (wsRef.current) {\n wsRef.current.close();\n }\n };\n }, [user]);\n \n // Send text message\n const sendMessage = () => {\n if (!inputMessage.trim()) return;\n \n if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {\n wsRef.current.send(JSON.stringify({\n type: 'message',\n messageType: MessageType.TEXT,\n content: inputMessage\n }));\n \n setInputMessage(\"\");\n }\n };\n \n // Handle Enter key press\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n };\n \n // Start voice recording\n const startRecording = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const recorder = new MediaRecorder(stream);\n const chunks: Blob[] = [];\n \n recorder.ondataavailable = (e) => {\n if (e.data.size > 0) {\n chunks.push(e.data);\n }\n };\n \n recorder.onstop = async () => {\n const blob = new Blob(chunks, { type: 'audio/webm' });\n \n // Upload voice recording\n const formData = new FormData();\n formData.append('voice', blob);\n \n try {\n const response = await fetch('/api/upload/voice', {\n method: 'POST',\n body: formData\n });\n \n const data = await response.json();\n \n if (data.key) {\n // Send voice message\n if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {\n wsRef.current.send(JSON.stringify({\n type: 'message',\n messageType: MessageType.VOICE,\n content: data.key\n }));\n }\n }\n } catch (error) {\n console.error('Error uploading voice:', error);\n }\n \n // Clear recording state\n setIsRecording(false);\n setRecordedChunks([]);\n \n // Stop all tracks\n stream.getTracks().forEach(track => track.stop());\n };\n \n recorder.start();\n setMediaRecorder(recorder);\n setIsRecording(true);\n setRecordedChunks([]);\n } catch (error) {\n console.error('Error starting recording:', error);\n }\n };\n \n // Stop voice recording\n const stopRecording = () => {\n if (mediaRecorder) {\n mediaRecorder.stop();\n }\n };\n \n // Handle image upload\n const handleImageUpload = async (e: React.ChangeEvent) => {\n const files = e.target.files;\n if (!files || files.length === 0) return;\n \n const file = files[0];\n const formData = new FormData();\n formData.append('image', file);\n \n try {\n const response = await fetch('/api/upload/image', {\n method: 'POST',\n body: formData\n });\n \n const data = await response.json();\n \n if (data.key) {\n // Send image message\n if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {\n wsRef.current.send(JSON.stringify({\n type: 'message',\n messageType: MessageType.IMAGE,\n content: data.key\n }));\n }\n }\n } catch (error) {\n console.error('Error uploading image:', error);\n }\n \n // Clear the input\n e.target.value = '';\n };\n \n return (\n

\n \n \n

Chat Room

\n \n

\n {messages.map((message) => (\n \n ))}\n

\n \n

\n {isRecording && (\n

\n Recording...\n

\n )}\n \n setInputMessage(e.target.value)}\n onKeyPress={handleKeyPress}\n disabled={isRecording}\n />\n \n

\n \n \n 📷\n \n \n {isRecording ? (\n \n ) : (\n \n )}\n \n \n

\n );\n};\n\n// Main App component\nexport function App() {\n const [user, setUser] = useState(null);\n const [users, setUsers] = useState([]);\n const [loading, setLoading] = useState(true);\n \n // Check for initial data\n useEffect(() => {\n // @ts-ignore - This is injected by the server\n const initialData = window.__INITIAL_DATA__;\n \n if (initialData && initialData.onlineUsers) {\n setUsers(initialData.onlineUsers);\n }\n \n setLoading(false);\n }, []);\n \n // Handle login\n const handleLogin = async (username: string) => {\n try {\n const response = await fetch('/api/login', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ username })\n });\n \n const data = await response.json();\n \n if (data.user) {\n setUser(data.user);\n \n // Set up WebSocket for user updates\n const ws = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws?userId=${data.user.id}&username=${data.user.username}`);\n \n ws.onmessage = (event) => {\n const wsData = JSON.parse(event.data);\n \n switch (wsData.type) {\n case WebSocketMessageType.USER_LIST:\n setUsers(wsData.data);\n break;\n \n case WebSocketMessageType.USER_JOINED:\n setUsers(prev => {\n // Check if user already exists\n if (prev.some(u => u.id === wsData.data.id)) {\n return prev;\n }\n return [...prev, wsData.data];\n });\n break;\n \n case WebSocketMessageType.USER_LEFT:\n setUsers(prev => prev.filter(u => u.id !== wsData.data.id));\n break;\n }\n };\n }\n } catch (error) {\n console.error('Login error:', error);\n }\n };\n \n // Handle logout\n const handleLogout = () => {\n setUser(null);\n };\n \n if (loading) {\n return

;\n }\n \n return (\n <>\n {user ? (\n \n ) : (\n \n )}\n \n );\n}","deleted","label",[170,171,152],"frontend","components","permalink","https://www.val.town/x/Jjjiii/Jj/code/frontend/components/App.tsx","extension","actionData","errors"]

Chat App

Online Users

Chat Room