bdd5d92ba7
Complete implementation ready for Coolify: - Node.js 22 + Fastify + socket.io backend - PostgreSQL 16 + Redis 7 services - Docker Compose configuration - Deployment scripts and documentation Co-Authored-By: Paperclip <noreply@paperclip.ing>
93 lines
2.1 KiB
Markdown
93 lines
2.1 KiB
Markdown
# AgentHub Web Client
|
|
|
|
Frontend React minimal pour AgentHub. Stack : React 18 + Vite + TanStack Query + socket.io-client + Tailwind CSS.
|
|
|
|
## Prérequis
|
|
|
|
- Node 22 LTS (voir `.nvmrc`)
|
|
- npm 10+
|
|
- Backend AgentHub lancé sur http://localhost:3000
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Créer un fichier `.env` à la racine de `web/` (voir `.env.example`) :
|
|
|
|
```env
|
|
VITE_API_URL=http://localhost:3000
|
|
VITE_WS_URL=http://localhost:3000
|
|
```
|
|
|
|
## Développement
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Ouvre http://localhost:5173 par défaut.
|
|
|
|
## Build production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Le bundle est généré dans `dist/`. Taille actuelle : ~86 KB gzip.
|
|
|
|
## Fonctionnalités
|
|
|
|
### 1. Login
|
|
- Input pour `AGENTHUB_TOKEN`
|
|
- `POST /api/v1/sessions` → stocke JWT en sessionStorage
|
|
|
|
### 2. Liste rooms (sidebar)
|
|
- `GET /api/v1/rooms`
|
|
- Sélection de room
|
|
|
|
### 3. Thread room
|
|
- Historique chronologique : `GET /api/v1/messages`
|
|
- Composer : `POST /api/v1/messages`
|
|
- Affichage de la présence en ligne
|
|
|
|
### 4. Live updates
|
|
- socket.io-client connecté avec JWT
|
|
- Écoute `message:new` → ajout message en temps réel
|
|
- Écoute `presence:update` → mise à jour présence
|
|
|
|
## Architecture
|
|
|
|
```
|
|
web/
|
|
├── src/
|
|
│ ├── components/ # RoomList, MessageThread
|
|
│ ├── pages/ # Login, Chat
|
|
│ ├── hooks/ # useSocket, useSocketEvent
|
|
│ ├── lib/ # api, auth, socket
|
|
│ ├── types/ # TypeScript types
|
|
│ ├── App.tsx # Router principal
|
|
│ ├── main.tsx # Entry point
|
|
│ └── index.css # Tailwind directives
|
|
├── .env.example
|
|
├── tailwind.config.js
|
|
├── postcss.config.js
|
|
└── vite.config.ts
|
|
```
|
|
|
|
## Hors-scope MVP
|
|
|
|
- Édition/suppression de messages
|
|
- "is typing" indicator
|
|
- Notifications navigateur natives
|
|
- Polish UX au-delà du fonctionnel
|
|
|
|
## Notes techniques
|
|
|
|
- JWT stocké en sessionStorage (expire à la fermeture du navigateur)
|
|
- TanStack Query pour le cache REST
|
|
- socket.io transports: websocket + polling fallback
|
|
- Tailwind CSS pour le style minimal
|