Componente Alpine helpWidget — Panel de Ayuda Global
Descripción
helpWidget es el componente Alpine.js registrado globalmente en static/js/alpine-components.js que gestiona el panel de ayuda lateral presente en todas las páginas de CreaRack Pro (a través de base.html). Ofrece dos modos de operación:
- Modo Help (por defecto): panel flotante superpuesto a la app, accesible con un botón flotante.
- Modo Tutor IT: panel fijo de 600 px a la derecha con split-view —la app se comprime a la izquierda y el usuario puede interactuar con ambos simultáneamente.
Registro del componente
// static/js/alpine-components.js
Alpine.data('helpWidget', () => ({ … }));
El componente se instancia en base.html mediante el atributo x-data="helpWidget".
Estado interno
| Propiedad | Tipo | Persistencia | Descripción |
|---|
open | boolean | localStorage('helpOpen') en modo Tutor | Si el panel está visible |
tutorMode | boolean | localStorage('helpTutorMode') | Modo Tutor IT activo |
tab | string | — | Pestaña activa: 'buscar' / 'wiki' / 'ia' |
question | string | — | Pregunta en curso al asistente IA |
answer | string|null | — | Respuesta del asistente IA |
total | number | — | Total de artículos wiki cargados |
Métodos públicos
| Método | Descripción |
|---|
init() | Hook Alpine: aplica clase body y carga wiki si el panel se restauró |
toggle() | Abre/cierra el panel; carga wiki si primer uso |
close() | Cierra el panel explícitamente |
toggleTutor() | Alterna modo Tutor IT; limpia answer anterior |
loadWiki() | Llama al endpoint core_api_help_help_wiki |
clearAsk() | Limpia question y answer |
clearSearch() | Limpia el filtro de búsqueda en wiki |
Métodos privados (prefijo _)
| Método | Descripción |
|---|
_persistOpen() | Guarda/borra helpOpen en localStorage según estado actual; solo activo cuando tutorMode=true |
_applyTutorBodyClass() | Añade/quita la clase CSS help-tutor-active al <body> para activar el layout split-view |
Persistencia y ciclo de vida ante re-renders HTMX
El principal problema que resolvió el commit fd5172d (s55, fix #4) fue que las navegaciones HTMX reinician Alpine, destruyendo el estado del componente. La solución adoptada:
open se inicializa con una IIFE que lee localStorage solo si helpTutorMode == 'true'.- Al inicializar (
init()), si open === true, se aplica la clase body y se carga la wiki automáticamente.
_persistOpen() se llama tras cada acción que cambia open o tutorMode.
open: (function () {
try {
const tutor = localStorage.getItem('helpTutorMode') === 'true';
return tutor && localStorage.getItem('helpOpen') === 'true';
} catch (_) { return false; }
})(),
Claves localStorage
| Clave | Valores | Lectura en |
|---|
helpTutorMode | 'true' / 'false' | toggleTutor() |
helpOpen | 'true' / ausente | Inicialización de open; _persistOpen() |
Endpoints consumidos
| Operación | URL |
|---|
core_api_help_help_wiki | /api/help/wiki/ |
core_api_help_help_ask | /api/help/ask/ |
core_api_help_help_article | /api/help/article/ |
CSS asociada
Archivo: static/css/pages/help.css
.help-panel — posición fija, ancho 600 px, right: 0..help-overlay — overlay transparente, pointer-events: none cuando Tutor activo.body.help-tutor-active — padding-right: 600px; transition: 0.25s ease (split-view, s55).
Historial de cambios relevantes
| Commit | Descripción |
|---|
| (anterior, s55 fix #3) | Fix HTML root mal formado; overlay pinned transparente con pointer-events:none |
fd5172d (s55 fix #4) | Split-view persistente: _persistOpen(), _applyTutorBodyClass(), init(), body.help-tutor-active |
Véase también
- [[feature—help—tutor-split-view]]