How nekrasovps/green-api-tt works
GREEN-API Web Chat is a browser-based thin client for authenticated messaging. The user supplies instance credentials, manages a local contact list, selects a contact, and sends or receives messages through GREEN-API. Incoming notifications are polled and deleted after processing; Telegram IDs are associated with local contacts where possible. The README documents persisted session, contact, and message state plus optimistic sending. Polling and UI wiring are visible in sampled source; store/API internals are not, so those links reflect documented responsibilities only.
Main entry points: ChatContacts.tsx Contact panel · chatStore.ts Persisted conversations · startPolling.ts Notification polling · authStore.ts Persisted credentials
Components 16
Application UI
- App routing
src/App.tsx - Authorization form
src/components/Authorization/Authorization.tsx - Chat view
src/components/Chat/Chat.tsx - Contact panel
src/components/ChatContacts/ChatContacts.tsx - Contact list
src/components/ListContacts/ListContacts.tsx - Add contact modal
src/components/ModalAddContact/ModalAddContact.tsx - Message history and composer
src/components/ChatMessages/ChatMessages.tsx
Client State
- Persisted credentials
src/store/authStore.ts - Persisted contacts
src/store/contactStore.ts - Persisted conversations
src/store/chatStore.ts - Phone formatting
src/utils/formatPhone.ts
Messaging Runtime
- Notification polling
src/utils/startPolling.ts
GREEN-API Access
- Chat API methods
src/api/chatApi.ts - HTTP client
src/api/apiClient.ts
Other components
- User
- GREEN-API
Connections 25
- User → Authorization form: enters credentials
- Authorization form → Persisted credentials: saves credentials
- App routing → Persisted credentials: reads session
- App routing → Authorization form: renders unauthenticated
- App routing → Chat view: renders authenticated
- Chat view → Persisted credentials: reads credentials
- Chat view → Notification polling: starts polling
- User → Contact panel: manages contacts
- Contact panel → Contact list: renders list
- Contact panel → Add contact modal: opens modal
- Add contact modal → Phone formatting: formats phone
- Add contact modal → Persisted contacts: adds contact
- Contact list → Persisted contacts: reads contacts
- Contact list → Persisted conversations: sets active chat
- Contact panel → Persisted credentials: clears session
- Contact panel → Persisted conversations: clears conversations
- Contact panel → Persisted contacts: clears contacts
- User → Message history and composer: composes message
- Message history and composer → Persisted conversations: sends and reads
- Persisted conversations → Chat API methods: sends message
- Notification polling → Chat API methods: receives and deletes
- Notification polling → Persisted contacts: maps sender ID
- Notification polling → Persisted conversations: stores incoming message
- Chat API methods → HTTP client: uses HTTP client
- HTTP client → GREEN-API: sends HTTP requests