54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# WebChatV2
|
|
|
|
ChatUI modular conectado a **n8n**, con árbol de temas (MainTheme → SubTheme),
|
|
chat central y panel derecho de **KeyNotes** editables (resumen / To-Do / notas).
|
|
|
|
## Layout
|
|
|
|
```
|
|
┌─────────────┬─────────────────────┬───────────────┐
|
|
│ Izquierda │ Centro │ Derecha │
|
|
│ Árbol de │ Chat │ KeyNotes │
|
|
│ temas │ (mensajes+input) │ (editables) │
|
|
└─────────────┴─────────────────────┴───────────────┘
|
|
```
|
|
|
|
- **Izquierda:** MainThemes expandibles con SubThemes. Agregar / renombrar / eliminar,
|
|
y **drag & drop** para reordenar.
|
|
- **Centro:** chat con Markdown, indicador "escribiendo…", botones
|
|
**Enviar / Detener / Reintentar**.
|
|
- **Derecha:** KeyNotes editables (`summary` | `todo` | `free`), drag & drop, y
|
|
sincronización con la respuesta de n8n (`source: n8n`).
|
|
|
|
Cada **SubTheme** guarda su propia conversación y sus propias KeyNotes.
|
|
|
|
## Stack
|
|
|
|
React + Vite + TypeScript, Tailwind CSS, Zustand (persistencia LocalStorage),
|
|
@dnd-kit (drag & drop), react-markdown + remark-gfm.
|
|
|
|
## Desarrollo
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # http://localhost:5173
|
|
npm run build # typecheck + build -> dist/
|
|
```
|
|
|
|
Configura la URL del webhook en `public/config.js` (runtime) o `.env`
|
|
(`VITE_N8N_WEBHOOK_URL`). Ver `docs/N8N_CONTRACT.md` para el formato request/response.
|
|
|
|
## Docker (Dockge)
|
|
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
|
|
Expone el sitio en `http://localhost:8080`. Para cambiar la URL del webhook sin
|
|
reconstruir, edita el `config.js` servido por nginx
|
|
(`/usr/share/nginx/html/config.js`) o monta un volumen:
|
|
|
|
```yaml
|
|
volumes:
|
|
- ./config.js:/usr/share/nginx/html/config.js:ro
|
|
```
|