418 строки
11 KiB
XML
418 строки
11 KiB
XML
# WSChat development state snapshot
|
|
|
|
Project: WSChat
|
|
Repository: https://github.com/viktor138irk/chat
|
|
Default branch: main
|
|
|
|
## Mandatory rule
|
|
|
|
Always update this `.sw` file after meaningful code, deployment, architecture, or debugging changes.
|
|
|
|
Never store secrets in this file: no Telegram tokens, proxy passwords, API keys, SSH credentials, or similar values. Use `[REDACTED]`.
|
|
|
|
## Product
|
|
|
|
Self-hosted live chat similar to Jivo/Tidio. Website widget sends visitor messages to Telegram operators. Operators reply in Telegram, and replies return back into the website widget through WebSocket.
|
|
|
|
MVP is currently functional:
|
|
|
|
```text
|
|
website -> widget.js -> backend -> Telegram operator -> backend -> WebSocket -> website widget
|
|
```
|
|
|
|
## Deployment
|
|
|
|
```text
|
|
widget/test page: https://widget.stackworks.ru/
|
|
admin panel: https://widget.stackworks.ru/admin/
|
|
backend API: https://api.stackworks.ru/health
|
|
backend local: http://127.0.0.1:3000
|
|
PM2 process: wschat-backend
|
|
source: /opt/ws-chat/source
|
|
data: /opt/ws-chat/data
|
|
SQLite: /opt/ws-chat/data/chat.sqlite
|
|
webroot: /var/www/widget_stack_usr/data/www/widget.stackworks.ru
|
|
```
|
|
|
|
MVP architecture is VPS-only. Raspberry Pi was removed from MVP because of Node.js/OS/DPKG instability.
|
|
|
|
## Working domains/sites
|
|
|
|
Known working sites:
|
|
|
|
```text
|
|
widget.stackworks.ru -> site_default
|
|
stackworks.ru -> site_stackworks
|
|
```
|
|
|
|
Known Telegram operator:
|
|
|
|
```text
|
|
telegram_user_id: 833333156
|
|
```
|
|
|
|
This operator is linked to both:
|
|
|
|
```text
|
|
site_default
|
|
site_stackworks
|
|
```
|
|
|
|
## Database and settings
|
|
|
|
Correct DB path:
|
|
|
|
```text
|
|
/opt/ws-chat/data/chat.sqlite
|
|
```
|
|
|
|
Production fallback DB path was fixed to the same value even if `.env` is not loaded.
|
|
|
|
`/health` must show:
|
|
|
|
```text
|
|
dbPath=/opt/ws-chat/data/chat.sqlite
|
|
telegram.running=true
|
|
telegram.hasBot=true
|
|
wsClients=<number>
|
|
```
|
|
|
|
Settings come from SQLite table `settings`, not from frontend.
|
|
|
|
Important keys:
|
|
|
|
```text
|
|
telegram.bot_token
|
|
telegram.proxy.enabled
|
|
telegram.proxy.type
|
|
telegram.proxy.host
|
|
telegram.proxy.port
|
|
telegram.proxy.username
|
|
telegram.proxy.password
|
|
```
|
|
|
|
Diagnostics:
|
|
|
|
```bash
|
|
sqlite3 /opt/ws-chat/data/chat.sqlite "select id,name,domain,widget_key,is_active from sites;"
|
|
sqlite3 /opt/ws-chat/data/chat.sqlite "select id,name,telegram_user_id,is_active from operators;"
|
|
sqlite3 /opt/ws-chat/data/chat.sqlite "select * from site_operators;"
|
|
sqlite3 /opt/ws-chat/data/chat.sqlite "select key, value from settings where key like 'telegram.proxy.%';"
|
|
sqlite3 /opt/ws-chat/data/chat.sqlite "select key, length(value) as len from settings where key='telegram.bot_token';"
|
|
```
|
|
|
|
If a DB exists inside `/opt/ws-chat/source/backend/data/`, that was a wrong fallback DB from older code.
|
|
|
|
## Current endpoints
|
|
|
|
```text
|
|
GET /health
|
|
GET /api/config/public
|
|
GET /api/admin/stats
|
|
GET /api/admin/messages?limit=50
|
|
GET /api/admin/sites
|
|
POST /api/admin/sites
|
|
GET /api/admin/operators
|
|
POST /api/admin/site-operators
|
|
DELETE /api/admin/site-operators
|
|
GET /api/admin/telegram/settings
|
|
POST /api/admin/telegram/settings
|
|
POST /api/admin/telegram/test-proxy
|
|
POST /api/admin/telegram/restart
|
|
POST /api/widget/message
|
|
GET /ws
|
|
```
|
|
|
|
## WebSocket architecture
|
|
|
|
Widget opens:
|
|
|
|
```text
|
|
/ws?siteId=<siteId>&visitorId=<visitorId>
|
|
```
|
|
|
|
Backend stores WebSocket clients by:
|
|
|
|
```text
|
|
siteId:visitorId
|
|
```
|
|
|
|
Telegram replies are delivered from:
|
|
|
|
```text
|
|
telegram.js -> operatorMessageNotifier -> server.js broadcastToVisitor()
|
|
```
|
|
|
|
Payload format:
|
|
|
|
```json
|
|
{
|
|
"type": "operator_message",
|
|
"conversationId": "conv_xxx",
|
|
"message": {
|
|
"id": "msg_xxx",
|
|
"direction": "operator",
|
|
"body": "text"
|
|
}
|
|
}
|
|
```
|
|
|
|
Nginx for `api.stackworks.ru` must proxy `/ws` with upgrade headers. Includes file used:
|
|
|
|
```text
|
|
/etc/nginx/fastpanel2-sites/api_stackwor_usr/api.stackworks.ru.includes
|
|
```
|
|
|
|
Required block:
|
|
|
|
```nginx
|
|
location /ws {
|
|
proxy_pass http://127.0.0.1:3000/ws;
|
|
proxy_http_version 1.1;
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
proxy_set_header Connection "upgrade";
|
|
proxy_set_header Host $host;
|
|
proxy_read_timeout 86400;
|
|
}
|
|
```
|
|
|
|
Check:
|
|
|
|
```bash
|
|
wscat -c "wss://api.stackworks.ru/ws?siteId=site_default&visitorId=test"
|
|
```
|
|
|
|
Expected:
|
|
|
|
```json
|
|
{"type":"connected","siteId":"site_default","visitorId":"test"}
|
|
```
|
|
|
|
## Telegram bridge
|
|
|
|
Runtime file:
|
|
|
|
```text
|
|
backend/src/telegram.js
|
|
```
|
|
|
|
Dependencies:
|
|
|
|
```text
|
|
telegraf
|
|
socks-proxy-agent
|
|
node-fetch
|
|
```
|
|
|
|
Implemented:
|
|
|
|
- bridge startup from SQLite settings;
|
|
- SOCKS5 proxy support;
|
|
- `socks5h://` proxy URL so DNS resolves through proxy;
|
|
- `/start` registers operator;
|
|
- `/status` replies with bridge state and active dialog;
|
|
- visitor messages go to active Telegram operators;
|
|
- Telegram reply to notification still works;
|
|
- inline button `Ответить в этот чат` selects active conversation;
|
|
- after selecting active conversation, normal Telegram messages are sent to that website visitor without reply;
|
|
- inline button `Сбросить активный диалог` clears selected dialog;
|
|
- Telegram replies are saved as operator messages;
|
|
- Telegram replies are delivered back to widget through WebSocket.
|
|
|
|
Important: only one polling instance may run per Telegram bot token.
|
|
|
|
Old observed Telegram error:
|
|
|
|
```text
|
|
409 Conflict: terminated by other getUpdates request; make sure that only one bot instance is running
|
|
```
|
|
|
|
Fix on VPS:
|
|
|
|
```bash
|
|
pkill -f "/opt/ws-chat/source/backend/src/server.js" || true
|
|
pkill -f "node src/server.js" || true
|
|
pm2 delete wschat-backend || true
|
|
cd /opt/ws-chat/source/backend
|
|
pm2 start src/server.js --name wschat-backend --update-env
|
|
pm2 save
|
|
sleep 5
|
|
curl -s http://127.0.0.1:3000/health | jq
|
|
```
|
|
|
|
## Widget
|
|
|
|
Runtime file:
|
|
|
|
```text
|
|
widget/src/widget.js
|
|
```
|
|
|
|
Production build now emits stable:
|
|
|
|
```text
|
|
https://widget.stackworks.ru/widget.js
|
|
```
|
|
|
|
Embed code example for `stackworks.ru`:
|
|
|
|
```html
|
|
<script
|
|
src="https://widget.stackworks.ru/widget.js?v=20"
|
|
data-site-id="site_stackworks"
|
|
data-api-url="https://api.stackworks.ru"
|
|
data-ws-url="wss://api.stackworks.ru"
|
|
></script>
|
|
```
|
|
|
|
Current widget implementation uses Shadow DOM for full style isolation. This was required because CSS on `stackworks.ru` broke the chat layout even with `!important` rules.
|
|
|
|
Current widget features:
|
|
|
|
- floating chat button;
|
|
- close button in header;
|
|
- mobile close works;
|
|
- header fixed height;
|
|
- form fixed at bottom;
|
|
- messages area fills remaining height;
|
|
- WebSocket auto-connect;
|
|
- automatic reconnect message;
|
|
- operator replies open chat automatically;
|
|
- Shadow DOM prevents host-site CSS from breaking input/button/form/layout.
|
|
|
|
## Admin panel
|
|
|
|
Admin URL:
|
|
|
|
```text
|
|
https://widget.stackworks.ru/admin/
|
|
```
|
|
|
|
Admin current features:
|
|
|
|
- dashboard stats;
|
|
- recent messages;
|
|
- Telegram/SOCKS5 settings;
|
|
- test proxy;
|
|
- restart Telegram bridge;
|
|
- list sites;
|
|
- add site;
|
|
- show widget key;
|
|
- show/copy embed code;
|
|
- list Telegram operators;
|
|
- bind/unbind operators to sites.
|
|
|
|
Admin UI was compacted, but visual polish is postponed.
|
|
|
|
Important deployment caveat: admin lives inside the same webroot as widget. Running this command deletes `/admin/` and causes 404:
|
|
|
|
```bash
|
|
rsync -av --delete /opt/ws-chat/source/widget/dist/ /var/www/widget_stack_usr/data/www/widget.stackworks.ru/
|
|
```
|
|
|
|
Do not use `--delete` when deploying widget into the shared webroot unless `/admin` is excluded.
|
|
|
|
Safe widget deploy:
|
|
|
|
```bash
|
|
cp -a /opt/ws-chat/source/widget/dist/. /var/www/widget_stack_usr/data/www/widget.stackworks.ru/
|
|
```
|
|
|
|
or:
|
|
|
|
```bash
|
|
rsync -av /opt/ws-chat/source/widget/dist/ /var/www/widget_stack_usr/data/www/widget.stackworks.ru/
|
|
```
|
|
|
|
Safe admin deploy:
|
|
|
|
```bash
|
|
mkdir -p /var/www/widget_stack_usr/data/www/widget.stackworks.ru/admin
|
|
rsync -av --delete /opt/ws-chat/source/admin-panel/dist/ /var/www/widget_stack_usr/data/www/widget.stackworks.ru/admin/
|
|
chown -R widget_stack_usr:widget_stack_usr /var/www/widget_stack_usr/data/www/widget.stackworks.ru
|
|
```
|
|
|
|
## Deployment commands
|
|
|
|
Backend update:
|
|
|
|
```bash
|
|
cd /opt/ws-chat/source
|
|
git pull --ff-only origin main
|
|
cd backend
|
|
npm install
|
|
pm2 restart wschat-backend --update-env
|
|
```
|
|
|
|
Frontend build:
|
|
|
|
```bash
|
|
cd /opt/ws-chat/source
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
Safe frontend publish:
|
|
|
|
```bash
|
|
cp -a /opt/ws-chat/source/widget/dist/. /var/www/widget_stack_usr/data/www/widget.stackworks.ru/
|
|
mkdir -p /var/www/widget_stack_usr/data/www/widget.stackworks.ru/admin
|
|
rsync -av --delete /opt/ws-chat/source/admin-panel/dist/ /var/www/widget_stack_usr/data/www/widget.stackworks.ru/admin/
|
|
chown -R widget_stack_usr:widget_stack_usr /var/www/widget_stack_usr/data/www/widget.stackworks.ru
|
|
```
|
|
|
|
Health/logs:
|
|
|
|
```bash
|
|
curl -s http://127.0.0.1:3000/health | jq
|
|
curl -s https://api.stackworks.ru/health | jq
|
|
pm2 logs wschat-backend --lines 100
|
|
```
|
|
|
|
Check public assets:
|
|
|
|
```bash
|
|
curl -I https://widget.stackworks.ru/widget.js
|
|
curl -I https://widget.stackworks.ru/admin/
|
|
```
|
|
|
|
## FastPanel safety rules
|
|
|
|
Never edit global FastPanel/nginx configs from project scripts. Never bind project services directly to ports 80/443. Never run `rsync --delete` against `/var/www` or parent directories. Copy static files only into exact domain webroots.
|
|
|
|
`widget.stackworks.ru` currently uses Apache backend under FastPanel, but DocumentRoot is correct:
|
|
|
|
```text
|
|
/var/www/widget_stack_usr/data/www/widget.stackworks.ru
|
|
```
|
|
|
|
## Important recent commits
|
|
|
|
```text
|
|
4b46aabc8210158f97c3c6e9274b8f703f7a8aa2 - Telegram proxy changed to socks5h
|
|
6f14353cd403f351c89e4274d189808951dcf940 - production DB fallback fixed
|
|
be004fd14ab16e3b1262980fe044356d2efbe806 - health endpoint includes dbPath
|
|
ec2eeeea66047dcd982a4c0258d1338314e25c29 - WebSocket delivery from Telegram replies implemented
|
|
49f502f84c8e2d2979481d71010908457fb0ce84 - widget connected to WebSocket backend
|
|
258d5285382e9038167881fd6eccead02f3d6457 - stable Vite widget.js build
|
|
5ba7bd846b19bc2ea76c7610e16d2b00aa7b838a - admin API for sites/operators
|
|
5fb492ef7b6aa94374929d2a90caf71a4881c59d - Telegram inline answer button and active dialog mode
|
|
ccda416945d3608c5945e7adc3ce5502abf9a707 - compact admin CSS pass
|
|
bfdc9f091c1990a04b0c62593dfb94c4ec600f72 - widget moved to Shadow DOM
|
|
```
|
|
|
|
## Current next steps
|
|
|
|
Highest priority:
|
|
|
|
1. Add admin auth/login. Current admin is public and must not remain public.
|
|
2. Add web admin conversations page with selected conversation and full history.
|
|
3. Add conversation status: open/closed.
|
|
4. Add operator assignment / `take in work` flow.
|
|
5. Add offline mode: visitor name/phone/email + Telegram ticket.
|
|
6. Add sound notifications and unread counters.
|
|
7. Improve widget customization from admin: title, subtitle, color, position.
|
|
8. Later: split admin to separate subdomain, for example `admin.widget.stackworks.ru`, to avoid shared-webroot deploy collisions.
|
|
9. Later: replace SQLite with PostgreSQL for production scale.
|
|
10. Later: Docker compose / installer.
|