2.4 KiB
2.4 KiB
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
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.
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:
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
- La imagen se actualiza sola con cada push a
main( Forgejo Actions la reconstruye y publica comoforgejo.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_URLdirectamente desde el compose (sin reconstruir la imagen).