How c4rnivore/green-api works
This is a browser-based WhatsApp text messenger backed by GREEN-API. The user supplies instance credentials, the app validates the instance, opens the chat workspace, checks a phone number to start a chat, and sends text messages. Incoming notifications are polled, applied to chat/message state, then acknowledged; local credentials and conversations persist in the browser. The graph reflects sampled source and README-described capabilities; some component internals, including new-chat and credential-form wiring, were not sampled, so uncertain calls are omitted.
Main entry points: messengerStore.ts Messenger store · greenApi.ts GREEN-API client · MessangerLayout.tsx Messenger layout · App.tsx App routing
Components 16
User experience
- Credentials form
src/components/CredentialsForm.tsx - Messenger layout
src/components/MessangerLayout.tsx - Chat search and list
src/components/ChatSidebar.tsx - New chat dialog
src/components/NewChatDialog.tsx - Chat window
src/components/ChatWindow.tsx - Account settings
src/components/SettingsDialog.tsx
Conversation state
- Messenger store
src/store/messengerStore.ts - Message processing
src/domain/messages.ts
GREEN-API integration
- GREEN-API client
src/api/greenApi.ts - Request configuration
src/api/apiUtils.ts
Application runtime
- App routing
src/App.tsx - Incoming notification polling
src/hooks/useIncomingNotifications.ts - React query runtime
src/main.tsx
Other components
- Messenger user
- GREEN-API service
- Browser local storage
Connections 28
- Messenger user → App routing: opens messenger
- App routing → Messenger store: reads credentials
- App routing → Credentials form: renders when signed out
- App routing → Messenger layout: renders when signed in
- Messenger user → Credentials form: enters credentials
- Credentials form → GREEN-API client: validates instance
- GREEN-API client → GREEN-API service: checks and configures
- Credentials form → Messenger store: saves credentials
- Messenger layout → Chat search and list: shows chats
- Messenger layout → Chat window: shows selected chat
- Messenger layout → New chat dialog: opens chat creation
- Messenger layout → Account settings: opens settings
- Chat search and list → Messenger store: reads chats and messages
- New chat dialog → GREEN-API client: checks phone
- GREEN-API client → Request configuration: builds request target
- GREEN-API client → GREEN-API service: sends API requests
- New chat dialog → Messenger store: adds chat
- Chat window → Messenger store: reads and updates messages
- Chat window → GREEN-API client: sends message
- Account settings → GREEN-API client: revalidates credentials
- Account settings → Messenger store: updates or clears account
- Messenger layout → Incoming notification polling: starts polling
- Incoming notification polling → Messenger store: reads credentials
- Incoming notification polling → GREEN-API client: receives and deletes notifications
- Incoming notification polling → Messenger store: applies notification
- Messenger store → Message processing: delegates notification processing
- Messenger store → Browser local storage: persists conversations and credentials
- React query runtime → App routing: mounts application