+
+ )
+}
+
+export default function App() {
+ return (
+
+ 
+
+ )
+}
diff --git a/py-peer/py-peer-frontend/src/components/Chat.tsx b/py-peer/py-peer-frontend/src/components/Chat.tsx
new file mode 100644
index 00000000..e845c3af
--- /dev/null
+++ b/py-peer/py-peer-frontend/src/components/Chat.tsx
@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { PaperAirplaneIcon } from '@heroicons/react/24/solid'
+import { UsersIcon } from '@heroicons/react/24/outline'
+import { usePyPeer } from '../context/PyPeerContext'
+import MessageItem from './MessageItem'
+import Spinner from './Spinner'
+
+export default function Chat() {
+ const {
+ nodeInfo,
+ topics,
+ messages,
+ activeTopic,
+ setActiveTopic,
+ sendMessage,
+ markRead,
+ connectedPeers,
+ } = usePyPeer()
+
+ const [input, setInput] = useState('')
+ const [sending, setSending] = useState(false)
+ const [showMobilePeers, setShowMobilePeers] = useState(false)
+ const bottomRef = useRef
+ Universal Connectivity – py-peer
+ {error ? ( +
+ {error}
+
+ ) : (
+
+
+ )}
+
+ {/* ── Topic sidebar ─────────────────────────────────────────────────── */}
+
+
+ {/* ── Chat area ─────────────────────────────────────────────────────── */}
+
+ {/* Chat header */}
+
+
+
+ {/* Mobile peer list overlay */}
+ {showMobilePeers && (
+
+
+ {activeTopic ? `# ${activeTopic}` : 'Select a topic'}
+
+
+
+
+
+
+ )}
+
+ {/* Messages */}
+ Connected Peers
+ {connectedPeers.length === 0 ? ( +None
+ ) : ( + connectedPeers.map((p) => ( +{p}
+ )) + )} +
+ {activeMessages.length === 0 ? (
+
+
+ {/* Input */}
+
+ 💬
+ No messages yet in # {activeTopic}
+
+ ) : (
+ activeMessages.map((msg, i) => (
+