// Desktop Messages panel β€” right-side drawer like the screenshot reference. // Mirrors the mobile chat list style but in the desktop chrome. const CHAT_PANEL_W = 360; const DESKTOP_CHATS = [ { name: 'Aishwarya Iyer', initials: 'AI', bg: '#EF4444', avatar: 'https://i.pravatar.cc/80?img=49', preview: 'Tap to chat', time: 'Apr 24', conn: 'internet', online: true, badge: 'HTTP' }, { name: 'Rohan Sharma', initials: 'RS', bg: '#F472B6', avatar: 'https://i.pravatar.cc/80?img=12', preview: 'sent you the deck', time: 'Mon', conn: 'internet', online: true, unread: 1 }, { name: 'Priya Nair', initials: 'PN', bg: '#22D3EE', avatar: 'https://i.pravatar.cc/80?img=47', preview: 'sounds good, let me check', time: 'Apr 18', conn: 'ble', online: true, unread: 2 }, { name: 'Arjun Mehta', initials: 'AM', bg: '#6EE7B7', avatar: 'https://i.pravatar.cc/80?img=14', preview: 'on it πŸ‘', time: 'Apr 16', conn: 'internet', online: true }, { name: 'Dimitri Volkov', initials: 'DV', bg: '#FBBF24', avatar: 'https://i.pravatar.cc/80?img=33', preview: 'merged the PR', time: 'Apr 14', conn: 'internet', online: false }, { name: 'Dave Thompson', initials: 'DT', bg: '#A78BFA', avatar: 'https://i.pravatar.cc/80?img=15', preview: 'shared a file Β· brief.pdf', time: 'Apr 12', conn: 'internet', online: true }, { name: 'Amara Okonkwo', initials: 'AO', bg: '#60A5FA', avatar: 'https://i.pravatar.cc/80?img=44', preview: 'see you tomorrow', time: 'Apr 09', conn: 'internet', online: false }, { name: 'Mei Tanaka', initials: 'MT', bg: '#F87171', avatar: 'https://i.pravatar.cc/80?img=20', preview: 'Thanks! Talk soon πŸ‘‹', time: 'Apr 04', conn: 'internet', online: false }, ]; function ConnChip({ type }) { const meta = { internet: { label: 'Internet', color: '#60A5FA' }, ble: { label: 'BLE', color: '#A78BFA' }, mesh: { label: 'Mesh', color: '#6EE7B7' }, mediator: { label: 'Mediator', color: '#FBBF24' }, }[type] || null; if (!meta) return null; return ( {meta.label} ); } function ChatPanel({ open, onClose, onStartCall }) { const [active, setActive] = React.useState(null); if (!open) return null; return ( ); } function ChatList({ onOpen, onClose }) { return ( <> {/* header */}
Messages Β· {DESKTOP_CHATS.length}
{/* search */}
Search messages…
{/* list */}
{DESKTOP_CHATS.map((c, i) => ( ))}
{/* footer status */}
Mediator online Β· 1 route BLE Β· 3 peers
); } function ChatThread({ peer, onBack, onClose, onStartCall }) { const [input, setInput] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(false); const [profileOpen, setProfileOpen] = React.useState(false); const [muted, setMuted] = React.useState(false); const [disappearing, setDisappearing] = React.useState(false); const [messages, setMessages] = React.useState([ { from: 'them', text: 'Tap to chat', time: '11:13 PM' }, ]); const send = () => { const t = input.trim(); if (!t) return; setInput(''); setMessages(m => [...m, { from: 'me', text: t, time: 'now' }]); setTimeout(() => { setMessages(m => [...m, { from: 'them', text: 'Got it β€” routing through HTTP mediator.', time: 'now' }]); }, 500); }; if (profileOpen) return setProfileOpen(false)} onStartCall={onStartCall}/>; return ( <>
{peer.initials} {peer.avatar && ( { e.currentTarget.style.display = 'none'; }}/> )}
setProfileOpen(true)} style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}>
{peer.name}
{peer.online ? 'online' : 'offline'} Β· via {peer.conn}
{menuOpen && setMenuOpen(false)} onViewProfile={() => { setMenuOpen(false); setProfileOpen(true); }} onStartCall={onStartCall}/>}
{messages.map((m, i) => (
{m.text}
{m.time}
))}
setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Message…" style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: 'var(--fg)', fontSize: 12.5, fontFamily: 'inherit' }} />
); } function iconBtnSm() { return { width: 24, height: 24, borderRadius: 6, background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--fg-muted)', display: 'grid', placeItems: 'center', padding: 0, }; } // ── Desktop chat β‹― menu (dropdown from header) ───────────────── function DTog({ on, onChange }) { return ( ); } function DChatRow({ icon, label, sub, right, onClick, danger, accent }) { const sw = (d) => {d}; return ( ); } function DChatOptionsMenu({ peer, muted, setMuted, disappearing, setDisappearing, onClose, onViewProfile, onStartCall }) { const sw = (d) => {d}; return ( <>
)} label="View profile" onClick={onViewProfile}/> )} label="Search in chat" onClick={onClose}/>
)} label="Mute notifications" right={ setMuted(m => !m)}/>}/> )} label="Disappearing messages" sub={disappearing ? 'After 24 hours' : 'Off'} right={ setDisappearing(d => !d)}/>}/> )} label="Media, links & files" sub="48 photos Β· 12 files" onClick={onClose}/>
)} accent label="Verify security code" onClick={onViewProfile}/> )} danger label="Block contact" onClick={onClose}/> )} danger label="Clear chat" onClick={onClose}/>
); } // ── Desktop contact profile (fills the chat panel) ───────────── function DContactProfile({ peer, muted, setMuted, disappearing, setDisappearing, onClose, onStartCall }) { const sw = (d, s = 16) => {d}; const conn = peer.conn === 'ble' ? 'Bluetooth mesh' : peer.conn === 'mesh' ? 'Ajna mesh' : 'DIDComm Β· Internet'; const init = (peer.initials || (peer.name || 'XX').split(' ').map(x => x[0]).join('')).toUpperCase(); const code = ['48201', '93517', '20846', '11759', '63092', '88410', '57231', '40198', '27514', '63820', '99471', '50384']; return (
Contact
{init} {peer.avatar && { e.currentTarget.style.display = 'none'; }}/>}
{peer.name}
did:peer:2.{init.toLowerCase()}…7Mq
{sw(, 12)} Verified Β· {conn}
{[['Message', sw(), onClose], ['Call', sw(), () => onStartCall && onStartCall(peer, 'audio')], ['Video', sw(<>), () => onStartCall && onStartCall(peer, 'video')], [muted ? 'Unmute' : 'Mute', sw(<>), () => setMuted(m => !m)]].map(([l, ic, fn]) => ( ))}
Safety numberβœ“ Matches
{code.map((g, i) =>
{g}
)}
)} label="Mute notifications" right={ setMuted(m => !m)}/>}/> )} label="Disappearing messages" sub={disappearing ? 'After 24 hours' : 'Off'} right={ setDisappearing(d => !d)}/>}/>
)} danger label="Block contact"/> )} danger label="Delete contact"/>
); } // Full-page Messages β€” list + thread, same data as the panel. function MessagesPage({ onStartCall }) { const [peer, setPeer] = React.useState(null); return (
{}}/>
{peer ? ( setPeer(null)} onClose={() => setPeer(null)} onStartCall={onStartCall}/> ) : (
Pick a conversation
Messages route peer-to-peer. Ajna AI can draft, summarize, or translate inside any thread.
)}
); } Object.assign(window, { ChatPanel, ChatList, ChatThread, MessagesPage, DESKTOP_CHATS, CHAT_PANEL_W, DChatOptionsMenu, DContactProfile });