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
useAutoComplete	Ghost text autocomplete (Tab para aceptar)
useComparison	Comparación de productos
useKeyboardShortcuts	Atajos de teclado (Cmd+K, Escape)
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
useTrendingSearches	Búsquedas populares
usePlaceholderRotation	Rotación de placeholders sugeridos
useDebounce	Debounce de búsquedas

¿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

Persistencia del chat

El historial de conversación se guarda automáticamente en localStorage:

• Máximo: 20 turnos de conversación
• Expiración: 7 días sin actividad
• Clave: neuroon_chat_history_{shopId}
• Se restaura al recargar la página

Contexto de conversación

El asistente IA considera los últimos 5 mensajes para mantener contexto en búsquedas conversacionales.

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: {
    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