# nekrasovps/green-api-tt architecture

> Architecture diagram of the GitHub repository nekrasovps/green-api-tt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nekrasovps/green-api-tt
- Repository: https://github.com/nekrasovps/green-api-tt

## Overview

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: [`src/components/ChatContacts/ChatContacts.tsx`](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ChatContacts/ChatContacts.tsx) (Contact panel), [`src/store/chatStore.ts`](https://github.com/nekrasovps/green-api-tt/blob/main/src/store/chatStore.ts) (Persisted conversations), [`src/utils/startPolling.ts`](https://github.com/nekrasovps/green-api-tt/blob/main/src/utils/startPolling.ts) (Notification polling), [`src/store/authStore.ts`](https://github.com/nekrasovps/green-api-tt/blob/main/src/store/authStore.ts) (Persisted credentials)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application UI"]
  node_app["App routing<br/>[App.tsx]"]
  node_authorization["Authorization form<br/>[Authorization.tsx]"]
  node_chat["Chat view<br/>[Chat.tsx]"]
  node_contacts_ui["Contact panel<br/>[ChatContacts.tsx]"]
  node_contact_list["Contact list<br/>[ListContacts.tsx]"]
  node_add_contact["Add contact modal"]
  node_message_ui["Message history and composer<br/>[ChatMessages.tsx]"]
end

subgraph group_state["Client State"]
  node_auth_store[("Persisted credentials<br/>[authStore.ts]")]
  node_contact_store[("Persisted contacts<br/>[contactStore.ts]")]
  node_chat_store[("Persisted conversations<br/>[chatStore.ts]")]
  node_phone_format["Phone formatting<br/>[formatPhone.ts]"]
end

subgraph group_messaging["Messaging Runtime"]
  node_polling["Notification polling<br/>[startPolling.ts]"]
end

subgraph group_network["GREEN-API Access"]
  node_chat_api["Chat API methods<br/>[chatApi.ts]"]
  node_api_client["HTTP client<br/>[apiClient.ts]"]
end

node_user(("User"))
node_green_api{{"GREEN-API"}}

node_user -->|"enters credentials"| node_authorization
node_authorization -->|"saves credentials"| node_auth_store
node_app -->|"reads session"| node_auth_store
node_app -->|"renders unauthenticated"| node_authorization
node_app -->|"renders authenticated"| node_chat
node_chat -->|"reads credentials"| node_auth_store
node_chat -->|"starts polling"| node_polling
node_user -->|"manages contacts"| node_contacts_ui
node_contacts_ui -->|"renders list"| node_contact_list
node_contacts_ui -->|"opens modal"| node_add_contact
node_add_contact -->|"formats phone"| node_phone_format
node_add_contact -->|"adds contact"| node_contact_store
node_contact_list -->|"reads contacts"| node_contact_store
node_contact_list -->|"sets active chat"| node_chat_store
node_contacts_ui -->|"clears session"| node_auth_store
node_contacts_ui -->|"clears conversations"| node_chat_store
node_contacts_ui -->|"clears contacts"| node_contact_store
node_user -->|"composes message"| node_message_ui
node_message_ui -->|"sends and reads"| node_chat_store
node_chat_store -->|"sends message"| node_chat_api
node_polling -->|"receives and deletes"| node_chat_api
node_polling -->|"maps sender ID"| node_contact_store
node_polling -->|"stores incoming message"| node_chat_store
node_chat_api -->|"uses HTTP client"| node_api_client
node_api_client -->|"sends HTTP requests"| node_green_api

click node_app "https://github.com/nekrasovps/green-api-tt/blob/main/src/App.tsx"
click node_authorization "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/Authorization/Authorization.tsx"
click node_chat "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/Chat/Chat.tsx"
click node_contacts_ui "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ChatContacts/ChatContacts.tsx"
click node_contact_list "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ListContacts/ListContacts.tsx"
click node_add_contact "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ModalAddContact/ModalAddContact.tsx"
click node_message_ui "https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ChatMessages/ChatMessages.tsx"
click node_auth_store "https://github.com/nekrasovps/green-api-tt/blob/main/src/store/authStore.ts"
click node_contact_store "https://github.com/nekrasovps/green-api-tt/blob/main/src/store/contactStore.ts"
click node_chat_store "https://github.com/nekrasovps/green-api-tt/blob/main/src/store/chatStore.ts"
click node_phone_format "https://github.com/nekrasovps/green-api-tt/blob/main/src/utils/formatPhone.ts"
click node_polling "https://github.com/nekrasovps/green-api-tt/blob/main/src/utils/startPolling.ts"
click node_chat_api "https://github.com/nekrasovps/green-api-tt/blob/main/src/api/chatApi.ts"
click node_api_client "https://github.com/nekrasovps/green-api-tt/blob/main/src/api/apiClient.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_authorization,node_chat,node_contacts_ui,node_contact_list,node_add_contact,node_message_ui,node_user toneBlue
class node_auth_store,node_contact_store,node_chat_store,node_phone_format toneAmber
class node_polling,node_green_api toneMint
class node_chat_api,node_api_client toneRose
```

## Components

### Application UI

- [App routing](https://github.com/nekrasovps/green-api-tt/blob/main/src/App.tsx): `src/App.tsx`
- [Authorization form](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/Authorization/Authorization.tsx): `src/components/Authorization/Authorization.tsx`
- [Chat view](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/Chat/Chat.tsx): `src/components/Chat/Chat.tsx`
- [Contact panel](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ChatContacts/ChatContacts.tsx): `src/components/ChatContacts/ChatContacts.tsx`
- [Contact list](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ListContacts/ListContacts.tsx): `src/components/ListContacts/ListContacts.tsx`
- [Add contact modal](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ModalAddContact/ModalAddContact.tsx): `src/components/ModalAddContact/ModalAddContact.tsx`
- [Message history and composer](https://github.com/nekrasovps/green-api-tt/blob/main/src/components/ChatMessages/ChatMessages.tsx): `src/components/ChatMessages/ChatMessages.tsx`

### Client State

- [Persisted credentials](https://github.com/nekrasovps/green-api-tt/blob/main/src/store/authStore.ts): `src/store/authStore.ts`
- [Persisted contacts](https://github.com/nekrasovps/green-api-tt/blob/main/src/store/contactStore.ts): `src/store/contactStore.ts`
- [Persisted conversations](https://github.com/nekrasovps/green-api-tt/blob/main/src/store/chatStore.ts): `src/store/chatStore.ts`
- [Phone formatting](https://github.com/nekrasovps/green-api-tt/blob/main/src/utils/formatPhone.ts): `src/utils/formatPhone.ts`

### Messaging Runtime

- [Notification polling](https://github.com/nekrasovps/green-api-tt/blob/main/src/utils/startPolling.ts): `src/utils/startPolling.ts`

### GREEN-API Access

- [Chat API methods](https://github.com/nekrasovps/green-api-tt/blob/main/src/api/chatApi.ts): `src/api/chatApi.ts`
- [HTTP client](https://github.com/nekrasovps/green-api-tt/blob/main/src/api/apiClient.ts): `src/api/apiClient.ts`

### Other components

- **User**
- **GREEN-API**

## Connections

- 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