How q7xk/q7-chat works
Q7 Chat is a local-first, end-to-end encrypted messenger: users create an on-device identity, pair with contacts, exchange expiring messages and attachments, and keep conversation data in browser storage. The main UI is composed around a shared store and P2P manager; transport prefers WebRTC and can relay sealed traffic through public MQTT brokers. Backup, vault locking, linked-device sync, and group conversations are distinct capabilities. The sampled excerpts and README support the central architecture; some UI and transport details are unsampled.
Main entry points: manager.ts P2P manager · context.tsx P2P provider · Shell.tsx App shell · store.tsx Conversation store
Components 23
Chat experience
- App shell
components/Shell.tsx - Conversation view
components/Thread.tsx - Message composer
components/Composer.tsx - Pairing UI
components/Connect.tsx - Group controls
components/GroupDialog.tsx - Settings and backup
components/Settings.tsx - Setup flow
components/Onboarding.tsx
Identity and safety
- Protocol crypto
lib/p2p/crypto.ts - Local vault
lib/vault.ts
Messaging runtime
- P2P provider
lib/p2p/context.tsx - P2P manager
lib/p2p/manager.ts - Q7RP framing
lib/p2p/q7rp.ts - WebRTC transport
lib/p2p/rtc.ts - MQTT relay transport
lib/p2p/mqtt.ts
Local data
- Conversation store
lib/store.tsx - IndexedDB
lib/db.ts - Attachment handling
lib/attach.ts - Device sync
lib/sync.ts - Encrypted backup
lib/backup.ts
Device platform
- Android WebView bridge
android/app/src/main/java/com/q7/chat/WebAppInterface.kt
Other components
- User
- Other devices
- Public MQTT brokers
Connections 31
- User → App shell: uses
README.md - App shell → Conversation view: renders
components/Shell.tsx - App shell → Pairing UI: renders
components/Shell.tsx - App shell → Settings and backup: renders
components/Shell.tsx - App shell → Setup flow: renders
components/Shell.tsx - Conversation view → Message composer: renders
components/Thread.tsx - Conversation view → P2P provider: uses
components/Thread.tsx - Message composer → P2P provider: sends through
components/Composer.tsx - Pairing UI → P2P provider: pairs through
components/Connect.tsx - Group controls → P2P provider: manages groups
- Settings and backup → Conversation store: updates
components/Settings.tsx - Settings and backup → Encrypted backup: exports and imports
components/Settings.tsx - P2P provider → Conversation store: bridges state
lib/p2p/context.tsx - P2P provider → P2P manager: initializes
lib/p2p/context.tsx - P2P manager → Protocol crypto: seals and signs
lib/p2p/manager.ts - P2P manager → Q7RP framing: uses framing
lib/p2p/manager.ts - P2P manager → WebRTC transport: uses transport
lib/p2p/manager.ts - P2P manager → MQTT relay transport: uses fallback
lib/p2p/manager.ts - WebRTC transport → Other devices: carries live traffic
README.md - MQTT relay transport → Public MQTT brokers: relays ciphertext
README.md - P2P manager → Other devices: exchanges messages
README.md - P2P manager → IndexedDB: loads identity
lib/p2p/manager.ts - Conversation store → IndexedDB: persists records
lib/store.tsx - Conversation store → Device sync: merges snapshots
lib/store.tsx - Conversation store → Encrypted backup: uses backup functions
lib/store.tsx - P2P manager → Device sync: syncs linked devices
lib/p2p/manager.ts - P2P manager → Attachment handling: transfers attachments
lib/p2p/manager.ts - P2P manager → Local vault: checks vault
lib/p2p/manager.ts - Encrypted backup → Protocol crypto: encrypts archive
lib/backup.ts - Encrypted backup → IndexedDB: restores records
lib/backup.ts - User → Android WebView bridge: may use