2026-06-27 21:03:10 -05:00
|
|
|
# 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.
|
|
|
|
|
|
2026-06-27 21:35:48 -05:00
|
|
|
## Despliegue (Forgejo Actions + Dockge)
|
|
|
|
|
|
|
|
|
|
La imagen se construye y publica automáticamente en el **Container Registry de Forgejo**
|
|
|
|
|
mediante Forgejo Actions (ver `.forgejo/workflows/build.yml`). En Dockge solo necesitas
|
|
|
|
|
pegar este `compose.yaml`:
|
|
|
|
|
|
|
|
|
|
```yaml
|
|
|
|
|
services:
|
|
|
|
|
chat-ui:
|
|
|
|
|
image: forgejo.ikeforge.com/ike/webchatv2:latest
|
|
|
|
|
container_name: webchatv2
|
|
|
|
|
restart: unless-stopped
|
|
|
|
|
ports:
|
|
|
|
|
- "8080:80"
|
|
|
|
|
environment:
|
|
|
|
|
- N8N_WEBHOOK_URL=https://n8n.ikeforge.com/webhook/chat
|
2026-06-27 21:03:10 -05:00
|
|
|
```
|
|
|
|
|
|
2026-06-27 21:35:48 -05:00
|
|
|
- La imagen se actualiza sola con cada push a `main` ( Forgejo Actions la reconstruye y
|
|
|
|
|
publica como `forgejo.ikeforge.com/ike/webchatv2:latest`). En Dockge pulsa
|
|
|
|
|
**Update / Deploy** para refrescar.
|
|
|
|
|
- La URL del webhook de n8n se configura con la env var `N8N_WEBHOOK_URL` directamente
|
|
|
|
|
desde el compose (sin reconstruir la imagen).
|
