@botuyo/chat-widget-standalone 1.0.2 → 1.0.5

package/README.md

@@ -11,14 +11,15 @@ Widget de chat AI embebible enterprise-ready. Disponible via **NPM** y **CDN** p
 
 ### Opción 1: CDN (JavaScript Vanilla)
 
-Agrega este código antes del cierre de `</body>`:
-
 ```html
-<!-- BotUyo Chat Widget -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.0/dist/botuyo-chat.js"></script>
-<script type="module">
+<!-- CSS (REQUERIDO) -->
+<link rel="stylesheet" href="https://cdn-chatbot.botuyo.com/latest/botuyo-chat.css">
+
+<!-- JavaScript -->
+<script src="https://cdn-chatbot.botuyo.com/latest/botuyo-chat.js"></script>
+<script>
   BotUyoChat.init({
-    apiKey: 'tu-api-key-aqui',
+    apiKey: 'tu-api-key',
     apiBaseUrl: 'https://api.botuyo.com',
     theme: {
       primaryColor: '#10b981',
@@ -29,24 +30,24 @@ Agrega este código antes del cierre de `</body>`:
 </script>
 ```
 
-**CDN Alternativo (unpkg):**
+**CDN Alternativo (jsDelivr/unpkg):**
 ```html
-<script type="module" src="https://unpkg.com/@botuyo/chat-widget-standalone@1.0.0/dist/botuyo-chat.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.4/dist/botuyo-chat.umd.css">
+<script src="https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.4/dist/botuyo-chat.umd.js"></script>
 ```
 
 ### Opción 2: NPM Package (React/Next.js)
 
 ```bash
-npm install @botuyo/chat-widget-standalone
+npm install @botuyo/chat-widget-standalone@1.0.4
 ```
 
-**Uso directo:**
 ```tsx
 import BotUyoChat from '@botuyo/chat-widget-standalone';
 
-// En tu componente o useEffect
+// En useEffect o al cargar
 BotUyoChat.init({
-  apiKey: 'tu-api-key-aqui',
+  apiKey: 'tu-api-key',
   apiBaseUrl: 'https://api.botuyo.com',
   theme: {
     primaryColor: '#10b981',
@@ -65,7 +66,7 @@ interface StandaloneConfig {
   // REQUERIDO
   // ═══════════════════════════════════════════
   apiKey: string;              // Tu API key de BotUyo
-  apiBaseUrl: string;          // URL del backend (ej: https://api.botuyo.com)
+  apiBaseUrl: string;          // URL del backend WebSocket
 
   // ═══════════════════════════════════════════
   // TEMA (opcional)
@@ -74,262 +75,199 @@ interface StandaloneConfig {
     primaryColor?: string;         // Color principal (default: '#10b981')
     botName?: string;              // Nombre del bot (default: 'Asistente Virtual')
     logoUrl?: string;              // URL del avatar del bot
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    position?: 'bottom-right' | 'bottom-left';
     welcomeMessage?: string;       // Mensaje de bienvenida inicial
-    inputPlaceholder?: string;     // Placeholder del input (default: 'Escribe tu mensaje...')
-    borderRadius?: string;         // Border radius ventana (default: '0.75rem')
-    launcherBorderRadius?: string; // Border radius botón (default: '50%')
-    starterPrompt?: string;        // Prompt inicial sugerido
-    avatarScale?: number;          // Escala del avatar (default: 1)
+    inputPlaceholder?: string;     // Placeholder del input
+    borderRadius?: string;         // Border radius ventana (default: '1.5rem')
+    height?: string;               // Altura del chat (default: '600px')
+    bottom?: string;               // Distancia desde abajo (default: '24px')
     
-    // Variables CSS para control total del tema
-    cssVariables?: {
-      background?: string;         // HSL sin paréntesis: '0 0% 100%'
-      foreground?: string;         // Color del texto
-      card?: string;               // Fondo de cards
-      cardForeground?: string;     // Texto en cards
-      primary?: string;            // Color primario
-      primaryForeground?: string;  // Texto sobre primario
-      muted?: string;              // Color muted
-      mutedForeground?: string;    // Texto muted
-      border?: string;             // Color de bordes
-      destructive?: string;        // Color de errores
-      radius?: string;             // Border radius global
+    // Animaciones
+    animations?: {
+      enabled?: boolean;           // Toggle maestro (default: true)
+      messageEntry?: 'spring' | 'slide' | 'fade' | 'scale' | 'none';
+      typingIndicator?: 'wave' | 'dots' | 'pulse' | 'none';
+      launcherPulse?: boolean;     // Pulso del botón launcher
+      windowTransitions?: boolean; // Animación apertura/cierre
     };
     
-    // Estilos de burbujas
-    bubbleStyles?: {
-      radius?: {
-        bubble?: string;
-        image?: string;
-        button?: string;
-        card?: string;
-      };
-      bot?: {
-        bg?: string;
-        text?: string;
-        border?: string;
-      };
-      user?: {
-        text?: string;
-      };
-      launcher?: {
-        bg?: string;
-        pulse?: boolean;
-      };
-    };
-  };
-
-  // ═══════════════════════════════════════════
-  // CONTEXTO DEL USUARIO (opcional)
-  // ═══════════════════════════════════════════
-  userContext?: {
-    token?: string;            // Token de autenticación del usuario
-    metadata?: {               // Metadata adicional del usuario
-      userId?: string;
-      email?: string;
-      name?: string;
-      [key: string]: any;
+    // Efectos visuales
+    effects?: {
+      glassmorphism?: boolean;     // Blur en headers
+      gradients?: boolean;         // Fondos degradados
+      softShadows?: boolean;       // Sombras suaves
+      glowEffects?: boolean;       // Glow en focus/hover
+      shimmerLoading?: boolean;    // Shimmer en carga
+      hoverLift?: boolean;         // Elevación en hover
     };
   };
 
   // ═══════════════════════════════════════════
-  // CONTEXTO DE LA PÁGINA (opcional)
+  // MEDIA CONFIG (opcional)
   // ═══════════════════════════════════════════
-  pageContext?: {
-    page?: string;             // Identificador de la página
-    id?: string | number;      // ID del recurso actual
-    url?: string;              // URL actual
-    title?: string;            // Título de la página
-    path?: string;             // Path de la URL
-    referrer?: string;         // Página de origen
-    [key: string]: any;        // Metadata adicional
+  mediaConfig?: {
+    enableVoice?: boolean;         // Habilitar notas de voz (default: true)
+    enableAttachments?: boolean;   // Habilitar adjuntos (default: true)
+    enableLocation?: boolean;      // Habilitar ubicación (default: true)
   };
 
-  // ═══════════════════════════════════════════
-  // SEO (opcional)
-  // ═══════════════════════════════════════════
-  includeSEOMetadata?: boolean; // Incluir metadata SEO (default: false)
-
   // ═══════════════════════════════════════════
   // CALLBACKS (opcional)
   // ═══════════════════════════════════════════
-  onNavigate?: (url: string) => void;        // Cuando el bot sugiere navegar
-  onLogin?: (userData: any) => void;         // Cuando el usuario se autentica
-  onEvent?: (eventName: string, data: any) => void; // Eventos personalizados
-  onStateChange?: (isOpen: boolean) => void; // Cuando el chat se abre/cierra
+  onVoiceCall?: () => void;        // Cuando se presiona el botón de llamada
+  onNavigate?: (url: string) => void;
+  onStateChange?: (isOpen: boolean) => void;
+  onEvent?: (eventName: string, data: any) => void;
 }
 ```
 
 ---
 
-## 📚 Ejemplos
+## 📞 Llamada de Voz (Demo)
 
-### Ejemplo Básico
+El widget incluye un **demo interactivo de llamada de voz** que:
+- Accede al micrófono real del usuario
+- Muestra waveform animado según el nivel de audio
+- Simula respuestas del bot después de 1 segundo de silencio
 
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Mi Sitio Web</title>
-</head>
-<body>
-  <h1>Bienvenido</h1>
-  
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.0/dist/botuyo-chat.js"></script>
-  <script type="module">
-    BotUyoChat.init({
-      apiKey: 'demo-key-12345',
-      apiBaseUrl: 'https://api.botuyo.com'
-    });
-  </script>
-</body>
-</html>
+```javascript
+BotUyoChat.init({
+  apiKey: 'tu-api-key',
+  apiBaseUrl: 'https://api.botuyo.com',
+  onVoiceCall: () => {
+    console.log('Llamada de voz iniciada');
+    // El demo se abre automáticamente dentro del widget
+  }
+});
 ```
 
-### Ejemplo con Personalización Completa
+> **Nota:** Este es un demo visual. Para integrar llamadas de voz reales, conecta con tu servicio de voz preferido (OpenAI Realtime, LiveKit, Twilio, etc.)
 
-```html
-<script type="module">
-  BotUyoChat.init({
-    apiKey: 'mi-api-key',
-    apiBaseUrl: 'https://api.botuyo.com',
-    
-    theme: {
-      primaryColor: '#6366f1',
-      botName: 'Asistente de Mi Empresa',
-      logoUrl: 'https://mi-sitio.com/logo.png',
-      position: 'bottom-left',
-      welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte hoy?',
-      inputPlaceholder: 'Pregúntame lo que quieras...',
-      cssVariables: {
-        background: '0 0% 100%',
-        foreground: '240 10% 3.9%',
-        primary: '239 84% 67%',
-        card: '0 0% 100%',
-        border: '240 6% 90%'
-      }
-    },
+---
 
-    userContext: {
-      token: 'user-auth-token-jwt',
-      metadata: {
-        userId: '12345',
-        email: 'usuario@ejemplo.com',
-        plan: 'premium'
-      }
-    },
+## 🎨 Theme Builder
 
-    pageContext: {
-      page: 'producto',
-      id: 'SKU-12345',
-      url: window.location.href,
-      title: document.title
-    },
+Usa el **Theme Builder** para personalizar visualmente el widget:
 
-    onNavigate: (url) => {
-      console.log('Navegando a:', url);
-      window.location.href = url;
-    },
+```
+https://tu-dominio.com/builder.html
+```
 
-    onEvent: (eventName, data) => {
-      console.log('Evento:', eventName, data);
-      
-      if (eventName === 'lead_captured') {
-        // Enviar a tu CRM
-        sendToCRM(data);
-      }
-    },
+El builder permite:
+- Cambiar colores en tiempo real
+- Presets: Default, Dark, Ocean, Sunset, Forest
+- Copiar código de integración listo para usar
 
-    onStateChange: (isOpen) => {
-      console.log('Chat:', isOpen ? 'abierto' : 'cerrado');
-      // Analytics
-      gtag('event', isOpen ? 'chat_opened' : 'chat_closed');
-    }
-  });
-</script>
-```
+---
 
-### Control Programático
+## 🛠️ API Pública
 
 ```javascript
 // Inicializar
-BotUyoChat.init({
-  apiKey: 'mi-api-key',
-  apiBaseUrl: 'https://api.botuyo.com'
-});
-
-// Abrir el chat
-document.getElementById('btn-ayuda').onclick = () => {
-  BotUyoChat.open();
-};
-
-// Cerrar el chat
-BotUyoChat.close();
+BotUyoChat.init(config);
 
-// Enviar mensaje programáticamente
-BotUyoChat.sendMessage('Necesito ayuda con mi pedido #12345');
+// Controles
+BotUyoChat.open();              // Abrir chat
+BotUyoChat.close();             // Cerrar chat
+BotUyoChat.toggle();            // Toggle abierto/cerrado
+BotUyoChat.destroy();           // Destruir widget
 
-// Actualizar configuración en tiempo real
+// Actualizar configuración en vivo
 BotUyoChat.update({
-  theme: {
-    primaryColor: '#ef4444',
-    botName: 'Soporte Urgente'
-  }
+  theme: { primaryColor: '#ef4444' }
 });
-
-// Destruir el widget
-BotUyoChat.destroy();
 ```
 
 ---
 
-## 🛠️ API Pública
+## 📚 Ejemplos
+
+### Ejemplo Mínimo
+```html
+<link rel="stylesheet" href="https://cdn-chatbot.botuyo.com/latest/botuyo-chat.css">
+<script src="https://cdn-chatbot.botuyo.com/latest/botuyo-chat.js"></script>
+<script>
+  BotUyoChat.init({
+    apiKey: 'demo-key',
+    apiBaseUrl: 'https://api.botuyo.com'
+  });
+</script>
+```
+
+### Ejemplo Completo
+```html
+<script>
+  BotUyoChat.init({
+    apiKey: 'mi-api-key',
+    apiBaseUrl: 'https://api.botuyo.com',
+    
+    theme: {
+      primaryColor: '#6366f1',
+      botName: 'Asistente Mi Empresa',
+      logoUrl: 'https://mi-sitio.com/logo.png',
+      position: 'bottom-right',
+      welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte?',
+      borderRadius: '1.5rem',
+      height: '550px',
+      
+      animations: {
+        enabled: true,
+        messageEntry: 'spring',
+        launcherPulse: true,
+      },
+      
+      effects: {
+        glassmorphism: true,
+        softShadows: true,
+        glowEffects: true,
+      },
+    },
+
+    mediaConfig: {
+      enableVoice: true,
+      enableAttachments: true,
+      enableLocation: false,
+    },
+
+    onStateChange: (isOpen) => {
+      console.log('Chat:', isOpen ? 'abierto' : 'cerrado');
+    },
 
-| Método | Descripción |
-|--------|-------------|
-| `BotUyoChat.init(config)` | Inicializa el widget. Retorna la instancia. |
-| `BotUyoChat.open()` | Abre la ventana del chat |
-| `BotUyoChat.close()` | Cierra la ventana del chat |
-| `BotUyoChat.sendMessage(message)` | Envía un mensaje programáticamente |
-| `BotUyoChat.update(config)` | Actualiza la configuración sin reiniciar |
-| `BotUyoChat.destroy()` | Destruye el widget y limpia recursos |
+    onVoiceCall: () => {
+      console.log('Llamada de voz iniciada');
+    },
+  });
+</script>
+```
 
 ---
 
-## 🎨 Temas Predefinidos
+## 🎭 Temas Predefinidos
 
 ### Tema Claro (Default)
 ```javascript
-cssVariables: {
-  background: '0 0% 100%',
-  foreground: '240 10% 3.9%',
-  primary: '160 84% 39%',
-  card: '0 0% 100%',
-  border: '240 6% 90%'
+theme: {
+  primaryColor: '#10b981'
 }
 ```
 
 ### Tema Oscuro
 ```javascript
-cssVariables: {
-  background: '240 10% 3.9%',
-  foreground: '0 0% 98%',
-  primary: '160 84% 39%',
-  card: '240 4% 16%',
-  border: '240 4% 20%'
+theme: {
+  primaryColor: '#8b5cf6',
+  cssVariables: {
+    background: '240 10% 3.9%',
+    foreground: '0 0% 98%',
+    card: '240 4% 16%',
+    border: '240 4% 20%'
+  }
 }
 ```
 
 ### Tema Ocean
 ```javascript
 theme: {
-  primaryColor: '#0ea5e9',
-  cssVariables: {
-    background: '200 50% 98%',
-    foreground: '200 50% 10%',
-    primary: '199 89% 48%'
-  }
+  primaryColor: '#0ea5e9'
 }
 ```
 
@@ -351,11 +289,9 @@ theme: {
 ## 📦 Build Local
 
 ```bash
-# Clonar repositorio
 git clone https://github.com/botuyo/chat-widget.git
 cd chat-widget
 
-# Instalar dependencias
 npm install
 
 # Desarrollo
@@ -364,28 +300,24 @@ npm run dev
 # Build producción
 npm run build
 
+# Solo UMD bundle
+npm run build:umd
+
 # Tests
 npm test
 ```
 
-**Archivos generados:**
-- `dist/botuyo-chat.js` - Bundle principal (~3KB, carga chunks lazy)
-- `dist/botuyo-chat.css` - Estilos (~25KB)
-- `dist/vendor-react-*.js` - React (~194KB, lazy)
-- `dist/chunk-chat-ui-*.js` - UI del chat (~89KB, lazy)
-
 ---
 
-## 📄 Licencia
+## 🔗 Links
 
-MIT License - © 2026 BotUyo
+- **NPM**: [npmjs.com/package/@botuyo/chat-widget-standalone](https://www.npmjs.com/package/@botuyo/chat-widget-standalone)
+- **CDN BotUyo**: `https://cdn-chatbot.botuyo.com/latest/`
+- **CDN jsDelivr**: `https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.4/dist/`
+- **Documentación**: [docs.botuyo.com](https://docs.botuyo.com)
 
 ---
 
-## 🔗 Links
+## 📄 Licencia
 
-- **NPM**: [npmjs.com/package/@botuyo/chat-widget-standalone](https://www.npmjs.com/package/@botuyo/chat-widget-standalone)
-- **CDN jsDelivr**: `https://cdn.jsdelivr.net/npm/@botuyo/chat-widget-standalone@1.0.0/dist/botuyo-chat.js`
-- **CDN unpkg**: `https://unpkg.com/@botuyo/chat-widget-standalone@1.0.0/dist/botuyo-chat.js`
-- **Documentación**: [docs.botuyo.com](https://docs.botuyo.com)
-- **Soporte**: soporte@botuyo.com
+MIT License - © 2026 BotUyo