WebChatV2/README.md

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.

Docker (Dockge)

El archivo de compose es compose.yaml (nombre que Dockge reconoce por defecto). En Dockge: crea un stack llamado webchatv2 y copia el contenido del repo en su carpeta (~/.dockge/stacks/webchatv2/), o clona el repo ahí. Dockge detectará el compose.yaml y podrás levantar/compilar desde la UI.

Por CLI equivalente:

docker compose -f compose.yaml up -d --build

Expone el sitio en http://localhost:8080. Para cambiar la URL del webhook sin reconstruir, edita public/config.js del repo (ya montado como volumen en /usr/share/nginx/html/config.js) y recarga la página.