Hooks Internos

Solo lectura

Esta página documenta hooks internos usados por el widget. Estos hooks NO son accesibles desde la API pública NeuroonWidget. La información aquí es solo para referencia y entender cómo funciona el widget internamente.

Arquitectura de Hooks

El widget usa hooks de Preact internamente para gestionar:

Hook	Propósito
useSearch	Estado de búsqueda y resultados
useComparison	Comparación de productos
useKeyboardShortcuts	Atajos de teclado (Cmd+K, Escape)
useSwipeGesture	Gestos táctiles en móvil
useChatPersistence	Persistencia de historial en localStorage
useReducedMotion	Detección de preferencia de movimiento reducido
useResponsive	Detección de breakpoints (mobile/tablet/desktop)
useFocusTrap	Atrapamiento de foco en modales

¿Por qué no son públicos?

El widget se carga como un script que solo expone window.NeuroonWidget:

// ESTO es lo único que puedes usar:
NeuroonWidget.init({ ... })
NeuroonWidget.getInstance()
NeuroonWidget.destroy()

// ESTO no funciona (hooks son internos):
// import { useKeyboardShortcuts } from '@neuroon/widget' ❌

Atajos de teclado disponibles

Aunque no puedes usar el hook directamente, el widget incluye estos atajos:

Atajo	Acción
Cmd+K / Ctrl+K	Abrir/cerrar widget
/	Abrir widget (fuera de inputs)
Escape	Cerrar widget
Tab	Aceptar autocompletado ghost text
Arrow Up/Down	Navegar sugerencias
Enter	Ejecutar búsqueda

Gestos táctiles incluidos

El widget incluye soporte para gestos en móvil:

Gesto	Acción
Swipe izquierda	Quitar filtro/producto de comparación
Swipe derecha	Aplicar sugerencia
Long press	Añadir producto a comparación

Personalización

Para personalizar el comportamiento del widget, usa las opciones de configuración:

NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',

  // Usa callbacks para responder a eventos
  callbacks: {
    onSearch: (query) => { ... },
    onResultClick: (product) => { ... },
    onFilterChange: (filters) => { ... },
  },

  // Personaliza traducciones
  translations: {
    search: { placeholder: 'Buscar...' },
  },

  // Personaliza estilos
  styles: {
    primary: '#6366f1',
  },
});

Próximos pasos

• Callbacks - Responde a eventos del widget
• Configuración - Todas las opciones disponibles
• JavaScript API - API pública del widget