AMB-IA Chat Widget

Widget de chat React reutilizable para integración en aplicaciones web. Componente autocontenido que se integra fácilmente proporcionando solo una API key.

📦 Instalación

``bash
npm install amb-ia-chat-widget
`

o con yarn:

`bash
yarn add amb-ia-chat-widget
`

🎯 Versiones Disponibles

El widget está disponible en dos versiones para máxima compatibilidad:

$3

- Tamaño: ~50 KB (minificado)
- Requiere: React 18+ disponible globalmente o como dependencia
- Ideal para: Aplicaciones React existentes, Next.js, Vite
- Uso: Instalación via npm + import ESM

$3

- Tamaño: ~368 KB (minificado, incluye React + ReactDOM + CSS)
- Requiere: Nada, completamente autónomo
- Shadow DOM: Aislamiento total de estilos (los estilos de tu sitio no afectan al widget)
- Ideal para: WordPress, Wix, Shopify, HTML puro, PHP
- Uso: Un solo




`

Características de la versión standalone:
- ✅ API simplificada: Usa ChatWidget.mount() en lugar de React.createElement()
- ✅ Contenedor automático: Si no existe #chat-widget-root, se crea automáticamente
- ✅ React incluido: No necesitas cargar React desde CDN
- ✅ Shadow DOM: Aislamiento completo de estilos - los CSS de tu sitio no afectan al widget
- ✅ CSS integrado: Los estilos se inyectan automáticamente, no necesitas tags

#### Opción B: Versión External (Con React CDN)

Si ya tienes React en tu sitio:

`html














`

📖 API

$3

| Prop | Tipo | Requerido | Descripción |
|------|------|-----------|-------------|
| apiKey | string | ✅ REQUERIDO | API key para autenticación con el backend AMB-IA. No tiene valor por defecto, debe ser proporcionada siempre. |

> [!IMPORTANT]
> La prop apiKey es obligatoria. El widget lanzará un error si no se proporciona.

$3

`jsx
import ChatWidget from 'amb-ia-chat-widget';
import 'amb-ia-chat-widget/css';

function MyApp() {
return (



);
}
`

🎨 Estilos

El widget incluye sus propios estilos basados en Tailwind CSS. Debes importar el CSS para que se vea correctamente:

$3

`jsx
import 'amb-ia-chat-widget/css';
// o
import 'amb-ia-chat-widget/styles';
`

$3

`html

`

🔧 Requisitos

- React: ^18.0.0 o ^19.0.0
- React DOM: ^18.0.0 o ^19.0.0

Estas son dependencias peer, por lo que debes tenerlas instaladas en tu proyecto.

📝 Características

- ✅ Shadow DOM (Standalone) - Aislamiento total de estilos, sin conflictos con tu sitio
- ✅ API Key obligatoria - Seguridad mejorada sin valores por defecto
- ✅ Dual bundle - Versión standalone (React incluido) y external (React externalizado)
- ✅ Fácil integración - Solo una línea de código
- ✅ Componente autocontenido
- ✅ Soporte para React 18 y 19
- ✅ Formatos ESM y UMD
- ✅ Estilos incluidos con Tailwind CSS
- ✅ Chat en tiempo real con LLM
- ✅ Interfaz responsive y moderna
- ✅ Markdown en respuestas (con remark-gfm)
- ✅ Scroll automático inteligente
- ✅ TypeScript definitions incluidas

🛠️ Desarrollo

Si quieres contribuir o modificar el widget:

`bash


Clonar el repositorio

git clone

Instalar dependencias

npm install

Modo desarrollo

npm run dev

Build del widget (external + standalone)

npm run build:widget

Build del widget external (React externalizado)

npm run build:external

Build del widget standalone (funcionamiento autocontenido, sin React)

npm run build:standalone

Preview

npm run preview
`

🤝 Soporte

Para reportar bugs o solicitar características, abre un issue en el repositorio.

📚 Ejemplos

Ver la carpeta examples/` para ejemplos de integración completos.

📄 Licencia de propiedad

Copyright (c) 2025 One System SAS

All rights reserved.

Notice: this file is propietary and can not be copied and/or distributed without permission from One System SAS.