# 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.

## 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
```

- 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).