Loading Matrix Client...

\n \n

\n \n \n \n\n",[],[260,262],"94f9ec62-3c3a-11f0-b3e6-9e149126039e","Settings.tsx","bbfebf6e-3c39-11f0-88d4-9e149126039e","dfdc8674-7222-4186-bca7-b68b66f56bb4",101,["D",1748488275360],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { themes, getThemeById, applyTheme, type Theme } from \"../../shared/themes.ts\";\n\ninterface SettingsProps {\n onClose: () => void;\n}\n\nexport default function Settings({ onClose }: SettingsProps) {\n const [selectedTheme, setSelectedTheme] = useState(() => {\n const savedThemeId = localStorage.getItem('matrix_theme');\n return savedThemeId ? getThemeById(savedThemeId) : themes[0];\n });\n\n const handleThemeChange = (theme: Theme) => {\n setSelectedTheme(theme);\n applyTheme(theme);\n };\n\n const handleClose = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) {\n onClose();\n }\n };\n\n return (\n

\n {/* Header */}\n

App Settings

\n \n \n \n

\n\n {/* Content */}\n

\n {/* Theme Selection */}\n

\n Choose Your Theme\n

\n Select a color theme that matches your style and preference.\n

\n \n

\n {themes.map((theme) => (\n handleThemeChange(theme)}\n style={{\n borderColor: selectedTheme.id === theme.id ? 'var(--color-primary)' : 'var(--color-border)'\n }}\n >\n {/* Theme Preview */}\n

\n\n {/* Theme Info */}\n

\n {theme.name}\n

\n {theme.description}\n

\n \n {theme.isDark ? '🌙 Dark' : '☀️ Light'}\n \n

\n\n {/* Selected Indicator */}\n {selectedTheme.id === theme.id && (\n

\n \n

\n )}\n

\n ))}\n

\n\n {/* Current Theme Preview */}\n

\n Current Theme Preview\n

\n Sample Chat Interface\n

\n Online\n

\n \n

\n \n You\n \n

\n This is how your messages will look with the selected theme.\n

\n\n

\n \n Friend\n \n

\n And this is how other people's messages will appear.\n

\n\n {/* Footer */}\n

\n \n Close\n \n

\n );\n}",[],[260,279,271],"components","0e29c368-3d95-11f0-8f28-76b3cceeab13","RoomList.tsx","2b14c356-3c32-11f0-bdf0-9e149126039e",128,["D",1748637084542],21,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\n\ninterface RoomListProps {\n session: UserSession;\n selectedRoom: MatrixRoom | null;\n onRoomSelect: (room: MatrixRoom) => void;\n}\n\nexport default function RoomList({ session, selectedRoom, onRoomSelect }: RoomListProps) {\n const [rooms, setRooms] = useState([]);\n const [directMessages, setDirectMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [activeTab, setActiveTab] = useState<'rooms' | 'dms'>('rooms');\n\n useEffect(() => {\n fetchRooms();\n }, [session]);\n\n const fetchRooms = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n // Get joined rooms\n const response = await fetch(\"/api/matrix/_matrix/client/r0/joined_rooms\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch rooms: ${response.status}`);\n }\n\n const data = await response.json();\n const roomIds = data.joined_rooms || [];\n\n // Fetch room details for each room\n const roomDetails = await Promise.all(\n roomIds.map(async (roomId: string) => {\n try {\n const stateResponse = await fetch(`/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(roomId)}/state`, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!stateResponse.ok) {\n console.warn(`Failed to fetch state for room ${roomId}`);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n\n const stateEvents = await stateResponse.json();\n \n // Extract room information from state events\n const nameEvent = stateEvents.find((event: any) => event.type === \"m.room.name\");\n const canonicalAliasEvent = stateEvents.find((event: any) => event.type === \"m.room.canonical_alias\");\n const topicEvent = stateEvents.find((event: any) => event.type === \"m.room.topic\");\n const avatarEvent = stateEvents.find((event: any) => event.type === \"m.room.avatar\");\n const createEvent = stateEvents.find((event: any) => event.type === \"m.room.create\");\n const memberEvents = stateEvents.filter((event: any) => event.type === \"m.room.member\");\n \n // Determine if this is a direct message room\n const isDirect = createEvent?.content?.is_direct === true || \n (memberEvents.length === 2 && !nameEvent?.content?.name && !canonicalAliasEvent?.content?.alias);\n \n // For direct messages, use the other user's display name\n let displayName = nameEvent?.content?.name || canonicalAliasEvent?.content?.alias || roomId;\n \n if (isDirect && memberEvents.length === 2) {\n const otherMember = memberEvents.find((event: any) => event.state_key !== session.userId);\n if (otherMember) {\n displayName = otherMember.content?.displayname || otherMember.state_key;\n }\n }\n\n const room: MatrixRoom & { isDirect?: boolean } = {\n room_id: roomId,\n name: displayName,\n canonical_alias: canonicalAliasEvent?.content?.alias,\n topic: topicEvent?.content?.topic,\n avatar_url: avatarEvent?.content?.url,\n isDirect,\n };\n\n return room;\n } catch (error) {\n console.error(`Error fetching details for room ${roomId}:`, error);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n })\n );\n\n // Separate rooms and direct messages\n const publicRooms = roomDetails.filter(room => !room.isDirect);\n const dms = roomDetails.filter(room => room.isDirect);\n\n setRooms(publicRooms);\n setDirectMessages(dms);\n } catch (err) {\n console.error(\"Error fetching rooms:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load rooms\");\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n );\n }\n\n if (error) {\n return (\n

\n \n {error}\n

\n \n Try again\n \n

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

\n {/* Header with tabs */}\n

\n setActiveTab('rooms')}\n className={`flex-1 px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium rounded-md transition-colors ${\n activeTab === 'rooms'\n ? 'theme-background theme-text shadow-sm'\n : 'theme-text-secondary theme-hover'\n }`}\n >\n

\n \n Rooms\n \n {rooms.length}\n \n

\n \n setActiveTab('dms')}\n className={`flex-1 px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium rounded-md transition-colors ${\n activeTab === 'dms'\n ? 'theme-background theme-text shadow-sm'\n : 'theme-text-secondary theme-hover'\n }`}\n >\n

\n \n DMs\n \n {directMessages.length}\n \n

\n \n

\n\n

\n {loading ? (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n ) : error ? (\n

\n \n {error}\n

\n \n Try again\n \n

\n ) : (\n \n )}\n

\n\n

\n \n \n Refresh {activeTab === 'rooms' ? 'Rooms' : 'Messages'}\n \n

\n );\n}\n\n// Separate component for room list content\nfunction RoomListContent({ \n rooms, \n selectedRoom, \n onRoomSelect, \n type \n}: { \n rooms: MatrixRoom[], \n selectedRoom: MatrixRoom | null, \n onRoomSelect: (room: MatrixRoom) => void,\n type: 'rooms' | 'dms'\n}) {\n const getRoomDisplayName = (room: MatrixRoom) => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n const getRoomInitials = (room: MatrixRoom) => {\n const name = getRoomDisplayName(room);\n if (name.startsWith(\"#\") || name.startsWith(\"@\")) {\n return name.substring(1, 3).toUpperCase();\n }\n return name.substring(0, 2).toUpperCase();\n };\n\n if (rooms.length === 0) {\n return (\n

\n {type === 'rooms' ? (\n \n ) : (\n \n )}\n

\n {type === 'rooms' ? 'No rooms found' : 'No direct messages'}\n

\n {type === 'rooms' ? 'Join some rooms to get started' : 'Start a conversation with someone'}\n

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

\n {rooms.map((room) => (\n onRoomSelect(room)}\n className={`w-full flex items-center space-x-2 sm:space-x-3 p-2 sm:p-3 rounded-lg sm:rounded-xl text-left transition-all duration-200 ${\n selectedRoom?.room_id === room.room_id\n ? \"border shadow-sm\"\n : \"theme-hover\"\n }`}\n style={selectedRoom?.room_id === room.room_id ? {\n backgroundColor: 'var(--color-primaryLight)',\n borderColor: 'var(--color-primary)',\n color: 'var(--color-primary)'\n } : {}}\n >\n

\n {room.avatar_url ? (\n \n ) : type === 'dms' ? (\n \n ) : (\n getRoomInitials(room)\n )}\n

\n {getRoomDisplayName(room)}\n

\n {room.topic && (\n

\n {room.topic}\n

\n )}\n

\n \n ))}\n

\n );\n}\n}",[],[260,279,281],"fc1f1a90-3c38-11f0-b5db-9e149126039e","MessageList.tsx","57581ef4-3c32-11f0-8585-9e149126039e",81,["D",1748487589415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { MatrixMessage } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: MatrixMessage[];\n currentUserId: string;\n}\n\nexport default function MessageList({ messages, currentUserId }: MessageListProps) {\n const messagesEndRef = useRef(null);\n const containerRef = useRef(null);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const formatTime = (timestamp: number) => {\n const date = new Date(timestamp);\n const now = new Date();\n const isToday = date.toDateString() === now.toDateString();\n \n if (isToday) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else {\n return date.toLocaleDateString([], { \n month: 'short', \n day: 'numeric',\n hour: '2-digit', \n minute: '2-digit' \n });\n }\n };\n\n const getUserDisplayName = (userId: string) => {\n // Extract username from Matrix ID (@username:homeserver.com)\n const match = userId.match(/@([^:]+):/);\n return match ? match[1] : userId;\n };\n\n const getUserInitials = (userId: string) => {\n const displayName = getUserDisplayName(userId);\n return displayName.substring(0, 2).toUpperCase();\n };\n\n const getUserColor = (userId: string) => {\n // Generate a consistent color based on user ID\n let hash = 0;\n for (let i = 0; i < userId.length; i++) {\n hash = userId.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n const colors = [\n \"bg-red-500\", \"bg-blue-500\", \"bg-green-500\", \"bg-yellow-500\",\n \"bg-purple-500\", \"bg-pink-500\", \"bg-indigo-500\", \"bg-teal-500\"\n ];\n \n return colors[Math.abs(hash) % colors.length];\n };\n\n const renderMessageContent = (message: MatrixMessage) => {\n const { content } = message;\n \n switch (content.msgtype) {\n case \"m.text\":\n return (\n

{content.body}

\n );\n case \"m.emote\":\n return (\n

\n {getUserDisplayName(message.sender)} {content.body}\n

\n );\n case \"m.notice\":\n return (\n

\n {content.body}\n

\n );\n case \"m.image\":\n return (\n

\n {content.body && (\n

{content.body}

\n )}\n

\n );\n case \"m.file\":\n return (\n

\n \n {content.body || \"File\"}\n

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

\n Unsupported message type: {content.msgtype}\n

\n );\n }\n };\n\n const groupMessagesByDate = (messages: MatrixMessage[]) => {\n const groups: { [date: string]: MatrixMessage[] } = {};\n \n messages.forEach(message => {\n const date = new Date(message.origin_server_ts).toDateString();\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n });\n \n return groups;\n };\n\n const messageGroups = groupMessagesByDate(messages);\n\n if (messages.length === 0) {\n return (\n

\n \n

No messages yet

\n Be the first to send a message in this room! Start a conversation and connect with your community.\n

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

\n {Object.entries(messageGroups).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {new Date(date).toLocaleDateString([], { \n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })}\n

\n\n {/* Messages for this date */}\n

\n {dayMessages.map((message, index) => {\n const isOwnMessage = message.sender === currentUserId;\n const prevMessage = index > 0 ? dayMessages[index - 1] : null;\n const showAvatar = !prevMessage || prevMessage.sender !== message.sender;\n const timeDiff = prevMessage ? message.origin_server_ts - prevMessage.origin_server_ts : 0;\n const showTime = showAvatar || timeDiff > 300000; // Show time if more than 5 minutes apart\n \n return (\n \n

\n {/* Avatar */}\n

\n {showAvatar && !isOwnMessage ? (\n

\n {getUserInitials(message.sender)}\n

\n ) : (\n

\n )}\n

\n\n {/* Message content */}\n

\n {showAvatar && (\n

\n \n {isOwnMessage ? 'You' : getUserDisplayName(message.sender)}\n \n \n {formatTime(message.origin_server_ts)}\n \n

\n )}\n \n

\n {renderMessageContent(message)}\n

\n \n {!showAvatar && showTime && (\n \n {formatTime(message.origin_server_ts)}\n \n )}\n

\n );\n })}\n

\n ))}\n \n

\n );\n}",[],[260,279,290],"e05ea3cc-3d94-11f0-a665-76b3cceeab13","MessageInput.tsx","642cb414-3c32-11f0-b43f-9e149126039e",124,["D",1748637007713],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface MessageInputProps {\n onSendMessage: (content: string) => void;\n}\n\nexport default function MessageInput({ onSendMessage }: MessageInputProps) {\n const [message, setMessage] = useState(\"\");\n const [sending, setSending] = useState(false);\n const textareaRef = useRef(null);\n\n useEffect(() => {\n // Auto-resize textarea but prevent scrolling\n if (textareaRef.current) {\n const textarea = textareaRef.current;\n textarea.style.height = \"auto\";\n const newHeight = Math.min(textarea.scrollHeight, 150);\n textarea.style.height = `${newHeight}px`;\n textarea.style.overflowY = newHeight >= 150 ? \"auto\" : \"hidden\";\n }\n }, [message]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n const trimmedMessage = message.trim();\n if (!trimmedMessage || sending) return;\n\n setSending(true);\n try {\n await onSendMessage(trimmedMessage);\n setMessage(\"\");\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n }\n } catch (error) {\n console.error(\"Failed to send message:\", error);\n } finally {\n setSending(false);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handlePaste = (e: React.ClipboardEvent) => {\n // Handle file uploads in the future\n const items = e.clipboardData?.items;\n if (items) {\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (item.type.indexOf(\"image\") !== -1) {\n // TODO: Handle image uploads\n console.log(\"Image paste detected - file uploads not implemented yet\");\n }\n }\n }\n };\n\n return (\n

\n {/* Message input */}\n

\n setMessage(e.target.value)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder=\"Type a message...\"\n disabled={sending}\n className=\"w-full px-3 sm:px-5 py-3 sm:py-4 pr-10 sm:pr-12 theme-input rounded-xl sm:rounded-2xl resize-none max-h-32 sm:max-h-40 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base leading-relaxed overflow-hidden transition-all duration-200\"\n style={{ \n minHeight: \"44px\",\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n rows={1}\n />\n\n {/* Character count for long messages */}\n {message.length > 500 && (\n

\n {message.length}/65536\n

\n )}\n

\n\n {/* Send button */}\n \n {sending\n ?

\n : (\n \n )}\n \n \n\n {/* Help text */}\n

\n Press Enter to send, Shift+Enter for new line\n Tap to send\n {message.length > 0 && (\n \n {message.length} characters\n \n )}\n

\n );\n}",[],[260,279,298],"2d4ccd66-3d96-11f0-9f01-76b3cceeab13","Login.tsx","d33020d6-3c31-11f0-9c84-9e149126039e",145,["D",1748637566278],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixLoginResponse } from \"../../shared/types.ts\";\n\ninterface LoginProps {\n onLogin: (session: UserSession) => void;\n}\n\nexport default function Login({ onLogin }: LoginProps) {\n const [homeserver, setHomeserver] = useState(\"https://matrix.org\");\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n\n try {\n // Ensure homeserver URL is properly formatted\n const serverUrl = homeserver.startsWith(\"http\") ? homeserver : `https://${homeserver}`;\n \n const response = await fetch(\"/api/matrix/_matrix/client/r0/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Homeserver\": serverUrl,\n },\n body: JSON.stringify({\n type: \"m.login.password\",\n user: username,\n password: password,\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `Login failed: ${response.status}`);\n }\n\n const loginData: MatrixLoginResponse = await response.json();\n \n const session: UserSession = {\n accessToken: loginData.access_token,\n userId: loginData.user_id,\n homeserver: serverUrl,\n deviceId: loginData.device_id,\n };\n\n onLogin(session);\n } catch (err) {\n console.error(\"Login error:\", err);\n setError(err instanceof Error ? err.message : \"Login failed\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n \n

Matrix Client

\n Connect to the decentralized future\n

\n\n

\n {error && (\n

\n \n {error}\n

\n )}\n\n

\n \n Homeserver\n \n setHomeserver(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)',\n ':focus': {\n borderColor: 'var(--color-primary)',\n boxShadow: `0 0 0 3px ${CSS.supports('color', 'var(--color-primary)') ? 'var(--color-primary)' : '#3b82f6'}10`\n }\n }}\n placeholder=\"https://matrix.org\"\n />\n

\n\n

\n \n Username\n \n setUsername(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n placeholder=\"@username:matrix.org\"\n />\n

\n\n

\n \n Password\n \n setPassword(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n placeholder=\"Password\"\n />\n

\n\n

\n \n {loading ? (\n

\n Signing in...\n

\n ) : (\n

\n \n Sign in to Matrix\n

\n )}\n \n

\n\n

\n Don't have an account?{\" \"}\n \n Learn about Matrix\n \n

\n );\n}",[],[260,279,307],"26771db2-3d95-11f0-af54-76b3cceeab13","ChatView.tsx","40325fe6-3c32-11f0-9b5a-9e149126039e",129,["D",1748637125315],26,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { MatrixMessage, MatrixRoom, UserSession } from \"../../shared/types.ts\";\nimport MessageInput from \"./MessageInput.tsx\";\nimport MessageList from \"./MessageList.tsx\";\n\ninterface ChatViewProps {\n session: UserSession;\n room: MatrixRoom;\n}\n\nexport default function ChatView({ session, room }: ChatViewProps) {\n const [messages, setMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [syncToken, setSyncToken] = useState(null);\n const syncIntervalRef = useRef(null);\n const currentRoomRef = useRef(null);\n\n useEffect(() => {\n // Clear messages when switching rooms\n if (currentRoomRef.current !== room.room_id) {\n setMessages([]);\n currentRoomRef.current = room.room_id;\n }\n\n loadMessages();\n startSync();\n\n return () => {\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n };\n }, [room.room_id]);\n\n const loadMessages = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/messages?dir=b&limit=100`,\n {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to load messages: ${response.status}`);\n }\n\n const data = await response.json();\n\n const messageEvents = data.chunk\n .filter((event: any) => {\n return event.type === \"m.room.message\" && event.content?.body;\n })\n .reverse(); // Reverse to show oldest first\n\n // Remove duplicates based on event_id\n const uniqueMessages = messageEvents.filter((message: any, index: number, array: any[]) =>\n array.findIndex(m => m.event_id === message.event_id) === index\n );\n\n setMessages(uniqueMessages);\n } catch (err) {\n console.error(\"Error loading messages:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load messages\");\n } finally {\n setLoading(false);\n }\n };\n\n const startSync = async () => {\n try {\n // Clear any existing sync interval\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n\n // Get initial sync token if we don't have one\n if (!syncToken) {\n const syncResponse = await fetch(\"/api/matrix/_matrix/client/r0/sync?timeout=0\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n }\n }\n\n // Start polling for new messages\n syncIntervalRef.current = window.setInterval(async () => {\n try {\n const url = syncToken\n ? `/api/matrix/_matrix/client/r0/sync?since=${syncToken}&timeout=10000`\n : \"/api/matrix/_matrix/client/r0/sync?timeout=10000\";\n\n const syncResponse = await fetch(url, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n\n // Check for new messages in current room\n if (syncData.rooms?.join?.[room.room_id]?.timeline?.events) {\n const newMessages = syncData.rooms.join[room.room_id].timeline.events\n .filter((event: any) => event.type === \"m.room.message\" && event.content?.body);\n\n if (newMessages.length > 0) {\n setMessages(prev => {\n // Prevent duplicates by checking event IDs\n const existingIds = new Set(prev.map(msg => msg.event_id));\n const uniqueNewMessages = newMessages.filter((msg: any) => !existingIds.has(msg.event_id));\n\n if (uniqueNewMessages.length > 0) {\n return [...prev, ...uniqueNewMessages];\n }\n return prev;\n });\n }\n }\n }\n } catch (error) {\n console.error(\"Sync error:\", error);\n }\n }, 10000); // Increased interval to 10 seconds to reduce API calls\n } catch (error) {\n console.error(\"Failed to start sync:\", error);\n }\n };\n\n const sendMessage = async (content: string) => {\n try {\n const txnId = Date.now().toString();\n\n // Optimistically add the message to the UI first\n const optimisticMessage: MatrixMessage = {\n event_id: `temp_${txnId}`,\n type: \"m.room.message\",\n room_id: room.room_id,\n sender: session.userId,\n content: {\n msgtype: \"m.text\",\n body: content,\n },\n origin_server_ts: Date.now(),\n };\n\n setMessages(prev => [...prev, optimisticMessage]);\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/send/m.room.message/${txnId}`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n body: JSON.stringify({\n msgtype: \"m.text\",\n body: content,\n }),\n },\n );\n\n if (!response.ok) {\n // Remove optimistic message on failure\n setMessages(prev => prev.filter(msg => msg.event_id !== `temp_${txnId}`));\n throw new Error(`Failed to send message: ${response.status}`);\n }\n\n const result = await response.json();\n\n // Replace optimistic message with real one\n setMessages(prev =>\n prev.map(msg =>\n msg.event_id === `temp_${txnId}`\n ? { ...msg, event_id: result.event_id }\n : msg\n )\n );\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n const getRoomDisplayName = () => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n return (\n

\n {/* Header - Hidden on mobile since we have the mobile header in App.tsx */}\n

\n {getRoomDisplayName()}\n

\n {room.topic &&

{room.topic}

}\n

\n \n \n \n

\n\n {/* Messages */}\n

\n {loading\n ? (\n

Loading messages...

\n )\n : error\n ? (\n

\n \n

Failed to load messages

{error}

\n \n Try again\n \n

\n )\n : }\n

\n\n {/* Message Input */}\n

\n \n

\n );\n}",[],[260,279,316],"2a76ef36-3d96-11f0-ad52-76b3cceeab13","App.tsx","47558a38-3c31-11f0-b20c-9e149126039e",144,["D",1748637561519],17,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport Login from \"./Login.tsx\";\nimport RoomList from \"./RoomList.tsx\";\nimport ChatView from \"./ChatView.tsx\";\nimport Settings from \"./Settings.tsx\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\nimport { getInitialTheme, applyTheme } from \"../../shared/themes.ts\";\n\nexport default function App() {\n const [session, setSession] = useState(null);\n const [selectedRoom, setSelectedRoom] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showSettings, setShowSettings] = useState(false);\n const [showSidebar, setShowSidebar] = useState(false);\n\n // Initialize theme on mount\n useEffect(() => {\n const theme = getInitialTheme();\n applyTheme(theme);\n }, []);\n\n // Check for existing session on load\n useEffect(() => {\n const savedSession = localStorage.getItem(\"matrix_session\");\n \n if (savedSession) {\n try {\n const parsedSession = JSON.parse(savedSession);\n setSession(parsedSession);\n } catch (error) {\n console.error(\"Failed to parse saved session:\", error);\n localStorage.removeItem(\"matrix_session\");\n }\n }\n \n setLoading(false);\n }, []);\n\n const handleLogin = (newSession: UserSession) => {\n setSession(newSession);\n localStorage.setItem(\"matrix_session\", JSON.stringify(newSession));\n };\n\n const handleLogout = () => {\n setSession(null);\n setSelectedRoom(null);\n localStorage.removeItem(\"matrix_session\");\n };\n\n const handleRoomSelect = (room: MatrixRoom) => {\n setSelectedRoom(room);\n // Close sidebar on mobile when room is selected\n setShowSidebar(false);\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!session) {\n return ;\n }\n\n return (\n

\n {/* Mobile Sidebar Overlay */}\n {showSidebar && (\n

setShowSidebar(false)}\n />\n )}\n\n {/* Sidebar */}\n

\n {/* Header */}\n

Matrix Client

{session.userId}

\n {/* Close sidebar button (mobile only) */}\n setShowSidebar(false)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors lg:hidden\"\n title=\"Close sidebar\"\n >\n \n \n\n {/* Settings button */}\n setShowSettings(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors group\"\n title=\"Settings\"\n >\n \n \n \n {/* Logout button */}\n \n \n \n

\n\n {/* Room List */}\n

\n \n

\n\n {/* Main Content */}\n

\n {selectedRoom ? (\n <>\n {/* Mobile Header */}\n

\n setShowSidebar(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors\"\n title=\"Open sidebar\"\n >\n \n \n

{selectedRoom.name}

\n {selectedRoom.topic && (\n

{selectedRoom.topic}

\n )}\n

\n \n \n ) : (\n <>\n {/* Mobile Header for welcome screen */}\n

\n setShowSidebar(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors\"\n title=\"Open sidebar\"\n >\n \n \n

Matrix Client

\n \n

Welcome to Matrix

\n Select a room from the sidebar to start chatting with your community. \n Your conversations are end-to-end encrypted and decentralized.\n

\n setShowSidebar(true)}\n className=\"mt-6 lg:hidden theme-button px-6 py-3 rounded-lg font-medium transition-colors\"\n >\n Browse Rooms\n \n

\n \n )}\n

\n\n {/* Settings Modal */}\n {showSettings && (\n setShowSettings(false)} />\n )}\n

\n );\n}",[],[260,279,325],"4755a9d2-3c31-11f0-b20c-9e149126039e",6,["D",1748484279629],[206,207,208,209,210,211,212],[260,279],"38eca1fc-3c31-11f0-861b-9e149126039e",["D",1748484255451],[205,213,214],[260],["D",1748488505799],[],[18,68],["D",1748484247288],[203],[18],["D",1748484200184],{"_11":12,"_156":74},{"_11":12,"_152":-5,"_73":74,"_31":72,"_153":154,"_155":30},{"_43":143,"_13":16,"_37":40,"_144":109,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":14,"_151":12},"ctx",{"_56":-5,"_175":385,"_386":387,"_388":389,"_390":30,"_391":30,"_392":30,"_393":24,"_394":-5,"_395":-7,"_396":-7,"_397":26,"_398":30,"_399":30,"_400":-5,"_401":30,"_402":30,"_403":30,"_404":-5},"ENV",{"_356":357,"_358":359,"_360":16,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend