@botuyo/chat-widget-standalone 1.0.60 → 1.0.62

package/dist/chunk-gallery-54UV-aGf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chunk-gallery-54UV-aGf.js","sources":["../src/chat-widget/components/Gallery.tsx"],"sourcesContent":["/**\r\n * @package @botuyo/chat-widget\r\n * Gallery - Componente visual para mostrar galerías de imágenes\r\n */\r\n\r\n'use client'\r\n\r\nimport { useState, memo, useRef, useEffect } from 'react'\r\nimport { useTranslations } from '@/chat-widget/i18n'\r\nimport { ChevronLeft, ChevronRight, X, ZoomIn } from './Icons'\r\nimport { cn } from '@/lib/utils'\r\n\r\ninterface GalleryProps {\r\n  images: Array<{ src: string; alt?: string }>\r\n  radius?: string\r\n}\r\n\r\nexport type { GalleryProps }\r\n\r\nexport const Gallery = memo(function Gallery({ images, radius = 'rounded-lg' }: GalleryProps) {\r\n  const { t } = useTranslations('extracted')\r\n  const [currentIndex, setCurrentIndex] = useState(0)\r\n  const [isLightboxOpen, setIsLightboxOpen] = useState(false)\r\n\r\n  const nextImage = () => {\r\n    setCurrentIndex(prev => (prev + 1) % images.length)\r\n  }\r\n\r\n  const prevImage = () => {\r\n    setCurrentIndex(prev => (prev - 1 + images.length) % images.length)\r\n  }\r\n\r\n  const openLightbox = (index: number) => {\r\n    setCurrentIndex(index)\r\n    setIsLightboxOpen(true)\r\n  }\r\n\r\n  const [imageError, setImageError] = useState<Set<number>>(new Set())\r\n\r\n  const handleImageError = (index: number) => {\r\n    setImageError(prev => new Set(prev).add(index))\r\n  }\r\n\r\n  // Si solo hay 1 imagen, mostrar como imagen simple\r\n  if (images.length === 1) {\r\n    return (\r\n      <div className=\"my-3 relative group\">\r\n        {imageError.has(0) ? (\r\n          <div\r\n            className={cn(\r\n              'w-full h-48 flex flex-col items-center justify-center',\r\n              'border bg-muted text-muted-foreground',\r\n              radius\r\n            )}\r\n            style={{ borderColor: 'hsl(var(--border))' }}\r\n          >\r\n            <svg\r\n              className=\"w-12 h-12 mb-2 opacity-50\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              viewBox=\"0 0 24 24\"\r\n            >\r\n              <path\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n                strokeWidth={2}\r\n                d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\r\n              />\r\n            </svg>\r\n            <span className=\"text-sm\">Imagen no disponible</span>\r\n          </div>\r\n        ) : (\r\n          <>\r\n            <img\r\n              src={images[0].src}\r\n              alt={images[0].alt || 'Imagen'}\r\n              className={cn(\r\n                'w-full h-auto object-cover cursor-pointer transition-all duration-300',\r\n                'border shadow-soft-md hover:shadow-soft-lg hover:scale-[1.02]',\r\n                radius\r\n              )}\r\n              style={{ borderColor: 'hsl(var(--border))' }}\r\n              loading=\"lazy\"\r\n              onClick={() => openLightbox(0)}\r\n              onError={() => handleImageError(0)}\r\n            />\r\n            <div className=\"absolute top-2 right-2 bg-black/50 backdrop-blur-sm p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity\">\r\n              <ZoomIn size={16} className=\"text-white\" />\r\n            </div>\r\n          </>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // Si hay 2-3 imágenes, mostrar grid horizontal\r\n  if (images.length <= 3) {\r\n    return (\r\n      <div className={cn('my-3 grid gap-2', images.length === 2 ? 'grid-cols-2' : 'grid-cols-3')}>\r\n        {images.map((img, idx) => (\r\n          <div key={idx} className=\"relative group overflow-hidden\">\r\n            {imageError.has(idx) ? (\r\n              <div\r\n                className={cn(\r\n                  'w-full h-32 flex flex-col items-center justify-center',\r\n                  'border bg-muted text-muted-foreground',\r\n                  radius\r\n                )}\r\n              >\r\n                <svg\r\n                  className=\"w-8 h-8 opacity-50\"\r\n                  fill=\"none\"\r\n                  stroke=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\"\r\n                >\r\n                  <path\r\n                    strokeLinecap=\"round\"\r\n                    strokeLinejoin=\"round\"\r\n                    strokeWidth={2}\r\n                    d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            ) : (\r\n              <>\r\n                <img\r\n                  src={img.src}\r\n                  alt={img.alt || `Imagen ${idx + 1}`}\r\n                  className={cn(\r\n                    'w-full h-32 object-cover cursor-pointer transition-all duration-300',\r\n                    'border border-border shadow-soft-md hover:shadow-soft-lg hover:scale-110',\r\n                    radius\r\n                  )}\r\n                  loading=\"lazy\"\r\n                  onClick={() => openLightbox(idx)}\r\n                  onError={() => handleImageError(idx)}\r\n                />\r\n                <div className=\"absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-end p-2\">\r\n                  <span className=\"text-white text-xs font-bold bg-black/50 backdrop-blur-sm px-2 py-1 rounded-full\">\r\n                    {idx + 1}/{images.length}\r\n                  </span>\r\n                </div>\r\n              </>\r\n            )}\r\n          </div>\r\n        ))}\r\n\r\n        {/* Lightbox */}\r\n        {isLightboxOpen && (\r\n          <Lightbox\r\n            images={images}\r\n            currentIndex={currentIndex}\r\n            onClose={() => setIsLightboxOpen(false)}\r\n            onNext={nextImage}\r\n            onPrev={prevImage}\r\n          />\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // Si hay 4+ imágenes, mostrar carrusel con thumbnails\r\n  return (\r\n    <div className=\"my-3 space-y-2\">\r\n      {/* Imagen Principal */}\r\n      <div className=\"relative group\">\r\n        {imageError.has(currentIndex) ? (\r\n          <div\r\n            className={cn(\r\n              'w-full h-56 flex flex-col items-center justify-center',\r\n              'border bg-muted text-muted-foreground',\r\n              radius\r\n            )}\r\n            style={{ borderColor: 'hsl(var(--border))' }}\r\n          >\r\n            <svg\r\n              className=\"w-12 h-12 mb-2 opacity-50\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              viewBox=\"0 0 24 24\"\r\n            >\r\n              <path\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n                strokeWidth={2}\r\n                d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\r\n              />\r\n            </svg>\r\n            <span className=\"text-sm\">Imagen no disponible</span>\r\n          </div>\r\n        ) : (\r\n          <>\r\n            <img\r\n              src={images[currentIndex].src}\r\n              alt={images[currentIndex].alt || `Imagen ${currentIndex + 1}`}\r\n              className={cn(\r\n                'w-full h-56 object-cover cursor-pointer transition-all duration-300',\r\n                'border shadow-soft-md',\r\n                radius\r\n              )}\r\n              style={{ borderColor: 'hsl(var(--border))' }}\r\n              loading=\"lazy\"\r\n              onClick={() => openLightbox(currentIndex)}\r\n              onError={() => handleImageError(currentIndex)}\r\n            />\r\n\r\n            {/* Overlay con controles */}\r\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between px-3\">\r\n              <button\r\n                onClick={prevImage}\r\n                className=\"p-2 rounded-full shadow-soft-lg transition-all hover:scale-110 active:scale-95\"\r\n                style={{\r\n                  backgroundColor: 'hsl(var(--card) / 0.9)',\r\n                  color: 'hsl(var(--foreground))',\r\n                }}\r\n                aria-label={t('anterior')}\r\n              >\r\n                <ChevronLeft size={20} />\r\n              </button>\r\n              <button\r\n                onClick={nextImage}\r\n                className=\"p-2 rounded-full shadow-soft-lg transition-all hover:scale-110 active:scale-95\"\r\n                style={{\r\n                  backgroundColor: 'hsl(var(--card) / 0.9)',\r\n                  color: 'hsl(var(--foreground))',\r\n                }}\r\n                aria-label={t('siguiente')}\r\n              >\r\n                <ChevronRight size={20} />\r\n              </button>\r\n            </div>\r\n\r\n            {/* Badge con contador */}\r\n            <div className=\"absolute top-3 right-3 bg-black/70 backdrop-blur-sm px-3 py-1 rounded-full\">\r\n              <span className=\"text-white text-xs font-bold\">\r\n                {currentIndex + 1} / {images.length}\r\n              </span>\r\n            </div>\r\n\r\n            {/* Icono de zoom */}\r\n            <div className=\"absolute bottom-3 right-3 bg-black/70 backdrop-blur-sm p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity\">\r\n              <ZoomIn size={16} className=\"text-white\" />\r\n            </div>\r\n          </>\r\n        )}\r\n      </div>\r\n\r\n      {/* Thumbnails */}\r\n      <div className=\"flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent\">\r\n        {images.map((img, idx) => (\r\n          <button\r\n            key={idx}\r\n            onClick={() => setCurrentIndex(idx)}\r\n            className={cn(\r\n              'flex-shrink-0 w-16 h-16 overflow-hidden transition-all duration-300 relative',\r\n              'border-2 hover:scale-110',\r\n              radius,\r\n              currentIndex === idx\r\n                ? 'border-[hsl(210,90%,50%)] ring-2 ring-[hsl(210,90%,50%)]/30 scale-105'\r\n                : 'border-border hover:border-[hsl(210,90%,70%)] opacity-70 hover:opacity-100'\r\n            )}\r\n          >\r\n            {imageError.has(idx) ? (\r\n              <div className=\"w-full h-full flex items-center justify-center bg-muted\">\r\n                <svg\r\n                  className=\"w-6 h-6 opacity-50\"\r\n                  fill=\"none\"\r\n                  stroke=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\"\r\n                >\r\n                  <path\r\n                    strokeLinecap=\"round\"\r\n                    strokeLinejoin=\"round\"\r\n                    strokeWidth={2}\r\n                    d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            ) : (\r\n              <img\r\n                src={img.src}\r\n                alt={img.alt || `Thumbnail ${idx + 1}`}\r\n                className=\"w-full h-full object-cover\"\r\n                loading=\"lazy\"\r\n                onError={() => handleImageError(idx)}\r\n              />\r\n            )}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {/* Lightbox */}\r\n      {isLightboxOpen && (\r\n        <Lightbox\r\n          images={images}\r\n          currentIndex={currentIndex}\r\n          onClose={() => setIsLightboxOpen(false)}\r\n          onNext={nextImage}\r\n          onPrev={prevImage}\r\n        />\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\n// ==========================================\r\n// 🔍 LIGHTBOX (Modal de Imagen)\r\n// ==========================================\r\n\r\ninterface LightboxProps {\r\n  images: Array<{ src: string; alt?: string }>\r\n  currentIndex: number\r\n  onClose: () => void\r\n  onNext: () => void\r\n  onPrev: () => void\r\n}\r\n\r\nfunction Lightbox({ images, currentIndex, onClose, onNext, onPrev }: LightboxProps) {\r\n  const { t } = useTranslations('extracted')\r\n\r\n  // Keyboard navigation\r\n  useEffect(() => {\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') onClose()\r\n      if (e.key === 'ArrowLeft') onPrev()\r\n      if (e.key === 'ArrowRight') onNext()\r\n    }\r\n    window.addEventListener('keydown', handler)\r\n    return () => window.removeEventListener('keydown', handler)\r\n  }, [onClose, onPrev, onNext])\r\n\r\n  // Touch swipe support\r\n  const touchStartX = useRef(0)\r\n  const handleTouchStart = (e: React.TouchEvent) => {\r\n    touchStartX.current = e.touches[0].clientX\r\n  }\r\n  const handleTouchEnd = (e: React.TouchEvent) => {\r\n    const dx = e.changedTouches[0].clientX - touchStartX.current\r\n    if (Math.abs(dx) > 50) {\r\n      if (dx > 0) { onPrev() } else { onNext() }\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"absolute inset-0 z-[100000] bg-black/95 backdrop-blur-sm flex items-center justify-center animate-in fade-in duration-200\"\r\n      onClick={onClose}\r\n      onTouchStart={handleTouchStart}\r\n      onTouchEnd={handleTouchEnd}\r\n    >\r\n      {/* Botón Cerrar */}\r\n      <button\r\n        onClick={onClose}\r\n        className=\"absolute top-4 right-4 bg-white/10 hover:bg-white/20 p-2 rounded-full transition-all hover:scale-110 active:scale-95 z-10\"\r\n        aria-label={t('cerrar')}\r\n      >\r\n        <X size={24} className=\"text-white\" />\r\n      </button>\r\n\r\n      {/* Contador */}\r\n      <div className=\"absolute top-4 left-4 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full z-10\">\r\n        <span className=\"text-white text-sm font-bold\">\r\n          {currentIndex + 1} / {images.length}\r\n        </span>\r\n      </div>\r\n\r\n      {/* Controles de Navegación */}\r\n      {images.length > 1 && (\r\n        <>\r\n          <button\r\n            onClick={e => {\r\n              e.stopPropagation()\r\n              onPrev()\r\n            }}\r\n            className=\"absolute left-4 bg-white/10 hover:bg-white/20 p-3 rounded-full transition-all hover:scale-110 active:scale-95 z-10\"\r\n            aria-label=\"Anterior\"\r\n          >\r\n            <ChevronLeft size={32} className=\"text-white\" />\r\n          </button>\r\n          <button\r\n            onClick={e => {\r\n              e.stopPropagation()\r\n              onNext()\r\n            }}\r\n            className=\"absolute right-4 bg-white/10 hover:bg-white/20 p-3 rounded-full transition-all hover:scale-110 active:scale-95 z-10\"\r\n            aria-label=\"Siguiente\"\r\n          >\r\n            <ChevronRight size={32} className=\"text-white\" />\r\n          </button>\r\n        </>\r\n      )}\r\n\r\n      {/* Imagen */}\r\n      <img\r\n        src={images[currentIndex].src}\r\n        alt={images[currentIndex].alt || `Imagen ${currentIndex + 1}`}\r\n        className=\"max-w-[90%] max-h-[85%] object-contain\"\r\n        onClick={e => e.stopPropagation()}\r\n      />\r\n\r\n      {/* Thumbnails strip */}\r\n      {images.length > 1 && (\r\n        <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 bg-black/50 backdrop-blur-sm px-3 py-2 rounded-full z-10\">\r\n          {images.map((_, idx) => (\r\n            <button\r\n              key={idx}\r\n              onClick={e => {\r\n                e.stopPropagation()\r\n                // Navigate to this index — use repeated prev/next to reach\r\n                const diff = idx - currentIndex\r\n                if (diff > 0) for (let i = 0; i < diff; i++) onNext()\r\n                if (diff < 0) for (let i = 0; i < Math.abs(diff); i++) onPrev()\r\n              }}\r\n              className={cn(\r\n                'w-2 h-2 rounded-full transition-all',\r\n                idx === currentIndex ? 'bg-white scale-125' : 'bg-white/40 hover:bg-white/60'\r\n              )}\r\n              aria-label={`Imagen ${idx + 1}`}\r\n            />\r\n          ))}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":["Gallery","memo","images","radius","t","useTranslations","currentIndex","setCurrentIndex","useState","isLightboxOpen","setIsLightboxOpen","nextImage","prev","length","prevImage","openLightbox","index","imageError","setImageError","Set","handleImageError","add","className","children","has","jsxs","cn","style","borderColor","jsx","fill","stroke","viewBox","strokeLinecap","strokeLinejoin","strokeWidth","d","Fragment","src","alt","loading","onClick","onError","ZoomIn","size","map","img","idx","Lightbox","onClose","onNext","onPrev","backgroundColor","color","ChevronLeft","ChevronRight","useEffect","handler","e","key","window","addEventListener","removeEventListener","touchStartX","useRef","onTouchStart","current","touches","clientX","onTouchEnd","dx","changedTouches","Math","abs","X","stopPropagation","_","diff","i"],"mappings":"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"}

package/dist/src/chat-widget/utils/theme.examples.d.ts

@@ -1,47 +0,0 @@
-/**
- * Ejemplo de uso del Sistema de Temas
- *
- * Este archivo demuestra cómo usar los temas predefinidos,
- * crear temas personalizados y aplicarlos al widget.
- */
-declare const defaultTheme: Required<Omit<import("..").ChatTheme, "defaultLocale" | "avatars" | "emotion" | "starterPrompt" | "bubbleStyles" | "promptPersistence" | "avatarScale" | "showPromptAvatar" | "animations" | "effects" | "avatar3dUrl">>;
-declare const customSimpleTheme: {
-    primaryColor: string;
-    botName: string;
-    cssVariables: {
-        primary: string;
-    };
-};
-declare const customFullTheme: {
-    primaryColor: string;
-    botName: string;
-    logoUrl: string;
-    position: "bottom-left";
-    welcomeMessage: string;
-    inputPlaceholder: string;
-    cssVariables: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        primary: string;
-        primaryForeground: string;
-        muted: string;
-        mutedForeground: string;
-        border: string;
-        destructive: string;
-        radius: string;
-    };
-};
-export declare const mergedTheme: Required<Omit<import("..").ChatTheme, "defaultLocale" | "avatars" | "emotion" | "starterPrompt" | "bubbleStyles" | "promptPersistence" | "avatarScale" | "showPromptAvatar" | "animations" | "effects" | "avatar3dUrl">>;
-export declare const myComponent: {
-    backgroundColor: string;
-    color: string;
-    borderColor: string;
-};
-export declare const containerStyle: {
-    backgroundColor: string;
-};
-export declare function MyApp(): boolean;
-export { defaultTheme, customSimpleTheme, customFullTheme, };
-//# sourceMappingURL=theme.examples.d.ts.map

package/dist/src/chat-widget/utils/theme.examples.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.examples.d.ts","sourceRoot":"","sources":["../../../../src/chat-widget/utils/theme.examples.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,QAAA,MAAM,YAAY,0NAAgB,CAAA;AA6BlC,QAAA,MAAM,iBAAiB;;;;;;CAOtB,CAAA;AAGD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;CAoBpB,CAAA;AAiBD,eAAO,MAAM,WAAW,0NAAoC,CAAA;AAmB5D,eAAO,MAAM,WAAW;;;;CAIvB,CAAA;AAkBD,eAAO,MAAM,cAAc;;CAG1B,CAAA;AAyBD,wBAAgB,KAAK,YAcpB;AAuFD,OAAO,EAEL,YAAY,EAMZ,iBAAiB,EACjB,eAAe,GAEhB,CAAA"}

package/dist/src/chat-widget/utils/themes/index.d.ts

@@ -1,12 +0,0 @@
-/**
- * @package @botuyo/chat-widget
- * Exportaciones centrales del sistema de temas
- *
- * Importa desde aquí todo lo relacionado con temas:
- * import { DEFAULT_THEME, getSolidStyles, mergeThemeWithDefaults } from './utils/themes'
- */
-export type { CSSVariables } from '../theme';
-export { DEFAULT_CSS_VARIABLES, DARK_CSS_VARIABLES } from '../theme';
-export { DEFAULT_THEME, } from '../theme';
-export { mergeThemeWithDefaults, getPrimaryColor, cssVariablesToInlineStyles, getSolidStyles, } from '../theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/src/chat-widget/utils/themes/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/chat-widget/utils/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGpE,OAAO,EACL,aAAa,GAId,MAAM,UAAU,CAAA;AAGjB,OAAO,EACL,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,GACf,MAAM,UAAU,CAAA"}

package/examples/cdn-example.html

@@ -1,226 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ejemplo CDN - BotUyo Chat Widget</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
-
-    .container {
-      background: white;
-      padding: 40px;
-      border-radius: 20px;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-      max-width: 600px;
-      width: 100%;
-    }
-
-    h1 {
-      color: #333;
-      margin-bottom: 10px;
-    }
-
-    p {
-      color: #666;
-      margin-bottom: 30px;
-      line-height: 1.6;
-    }
-
-    .button-group {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-
-    button {
-      background: #10b981;
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 600;
-      transition: all 0.3s ease;
-    }
-
-    button:hover {
-      background: #059669;
-      transform: translateY(-2px);
-      box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
-    }
-
-    button:active {
-      transform: translateY(0);
-    }
-
-    .status {
-      margin-top: 20px;
-      padding: 15px;
-      background: #f3f4f6;
-      border-radius: 8px;
-      font-size: 14px;
-      color: #666;
-    }
-
-    .status strong {
-      color: #10b981;
-    }
-
-    code {
-      background: #f3f4f6;
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: 'Courier New', monospace;
-      font-size: 13px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🎉 Ejemplo CDN del Chat Widget</h1>
-    <p>
-      Este es un ejemplo de integración del <strong>BotUyo Chat Widget</strong> usando CDN.
-      No requiere React, Next.js ni ningún framework - solo JavaScript vanilla.
-    </p>
-
-    <div class="button-group">
-      <button onclick="if(widget) widget.open()">🚀 Abrir Chat</button>
-      <button onclick="if(widget) widget.close()">❌ Cerrar Chat</button>
-      <button onclick="if(widget) widget.toggle()">🔄 Toggle Chat</button>
-      <button onclick="sendTestMessage()">💬 Enviar Mensaje</button>
-      <button onclick="showState()">📊 Ver Estado</button>
-    </div>
-
-    <div class="status" id="status">
-      <strong>Estado:</strong> Inicializando widget...
-    </div>
-
-    <div style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #e5e7eb;">
-      <h3 style="color: #666; margin-bottom: 10px;">Código de integración:</h3>
-      <pre style="background: #1f2937; color: #10b981; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px;"><code>&lt;script src="https://cdn.botuyo.com/chat-widget.js"&gt;&lt;/script&gt;
-&lt;script&gt;
-  const widget = BotUyoChat.init({
-    apiKey: 'demo-api-key',
-    apiBaseUrl: 'https://api.botuyo.com',
-    theme: {
-      primaryColor: '#10b981',
-      botName: 'Demo Bot',
-      position: 'bottom-right'
-    }
-  });
-&lt;/script&gt;</code></pre>
-    </div>
-  </div>
-
-  <!-- IMPORTANTE: Cargar el script del widget -->
-  <!-- En producción, usar: https://cdn.botuyo.com/chat-widget.js -->
-  <script src="../dist/botuyo-chat.js"></script>
-  
-  <script>
-    // Esperar a que el script esté cargado
-    let widget;
-    
-    // Inicializar el widget cuando BotUyoChat esté disponible
-    window.addEventListener('DOMContentLoaded', () => {
-      if (window.BotUyoChat) {
-        widget = window.BotUyoChat.init({
-      apiKey: 'demo-api-key-12345',
-      apiBaseUrl: 'https://api.botuyo.com', // Cambiar por tu API real
-      
-      theme: {
-        primaryColor: '#10b981',
-        botName: 'Demo Assistant',
-        position: 'bottom-right',
-        welcomeMessage: '¡Hola! 👋 Soy el asistente de demo. ¿En qué puedo ayudarte?',
-        inputPlaceholder: 'Escribe tu mensaje aquí...',
-        starterPrompt: '¿Necesitas ayuda? 💬',
-        borderRadius: '1rem',
-        launcherBorderRadius: '50%'
-      },
-      
-      pageContext: {
-        page: 'Demo CDN',
-        url: window.location.href,
-        title: document.title,
-        demo: true
-      },
-      
-      onStateChange: (isOpen) => {
-        updateStatus(`Chat ${isOpen ? 'abierto' : 'cerrado'}`);
-        console.log('Estado del chat:', isOpen);
-      },
-      
-      onNavigate: (url) => {
-        console.log('Navegación solicitada a:', url);
-        alert(`El bot solicita navegar a: ${url}`);
-      },
-      
-      onLogin: (userData) => {
-        console.log('Usuario autenticado:', userData);
-        updateStatus('Usuario autenticado correctamente');
-      },
-      
-      onEvent: (eventName, data) => {
-          console.log('Evento:', eventName, data);
-        }
-      });
-        
-        // Actualizar estado inicial cuando el widget esté listo
-        setTimeout(() => {
-          updateStatus('Widget listo para usar ✅');
-        }, 1000);
-      } else {
-        updateStatus('❌ Error: BotUyoChat no está disponible. Verifica que el script esté cargado.');
-      }
-    });
-    // Funciones auxiliares
-    function updateStatus(message) {
-      const statusEl = document.getElementById('status');
-      statusEl.innerHTML = `<strong>Estado:</strong> ${message}`;
-    }
-
-    function sendTestMessage() {
-      if (!widget) {
-        alert('Widget no está inicializado');
-        return;
-      }
-      widget.sendMessage('Este es un mensaje de prueba enviado programáticamente 🎯');
-      widget.open();
-      updateStatus('Mensaje enviado programáticamente');
-    }
-
-    function showState() {
-      if (!widget) {
-        alert('Widget no está inicializado');
-        return;
-      }
-      const state = widget.getState();
-      alert(JSON.stringify(state, null, 2));
-      updateStatus('Estado mostrado en consola');
-      console.log('Estado del widget:', state);
-    }
-
-    // Ejemplo de actualización dinámica del tema
-    setTimeout(() => {
-      console.log('💡 Tip: Puedes actualizar el tema en cualquier momento:');
-      console.log('widget.update({ theme: { primaryColor: "#8b5cf6" } })');
-    }, 3000);
-  </script>
-</body>
-</html>

package/examples/nextjs-example.js

@@ -1,188 +0,0 @@
-"use strict";
-// @ts-nocheck
-/**
- * Ejemplo de uso del Chat Widget en Next.js 13+ (App Router)
- * Con TypeScript, Server Components y Client Components
- *
- * ⚠️ NOTA: Este archivo contiene MÚLTIPLES EJEMPLOS de código en secciones separadas.
- * NO está diseñado para ejecutarse directamente - es un archivo de REFERENCIA.
- * Copia las secciones individuales que necesites a tus propios archivos.
- *
- * Los errores de "Duplicate identifier" son esperados porque hay múltiples
- * ejemplos de imports en diferentes secciones del mismo archivo.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.metadata = void 0;
-exports.default = RootLayout;
-exports.default = HomePage;
-exports.ChatButton = ChatButton;
-exports.default = ProductPage;
-// ========== app/layout.tsx (Root Layout) ==========
-var chat_widget_standalone_1 = require("@botuyo/chat-widget-standalone");
-require("./globals.css");
-exports.metadata = {
-    title: 'Mi App con Chat Widget',
-    description: 'Ejemplo de integración del Chat Widget en Next.js',
-};
-function RootLayout(_a) {
-    var children = _a.children;
-    return (<html lang="es">
-      <body>
-        <chat_widget_standalone_1.ChatWidgetProvider apiKey={process.env.NEXT_PUBLIC_CHAT_API_KEY} apiBaseUrl={process.env.NEXT_PUBLIC_CHAT_API_URL} theme={{
-            primaryColor: '#10b981',
-            botName: 'Asistente BotUyo',
-            position: 'bottom-right',
-            welcomeMessage: '¡Hola! 👋 ¿Cómo puedo ayudarte?',
-            bubbleStyles: {
-                launcher: {
-                    pulse: true
-                }
-            }
-        }} includeSEOMetadata={true} onNavigate={function (url) {
-            // Next.js navigation
-            window.location.href = url;
-        }}>
-          {children}
-        </chat_widget_standalone_1.ChatWidgetProvider>
-      </body>
-    </html>);
-}
-// ========== app/page.tsx (Homepage - Server Component) ==========
-var ChatButton_1 = require("@/components/ChatButton");
-function HomePage() {
-    return (<main className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
-      <div className="container mx-auto px-4 py-12">
-        <h1 className="text-4xl font-bold text-center mb-8">
-          Next.js + Chat Widget
-        </h1>
-        
-        <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-lg">
-          <h2 className="text-2xl font-semibold mb-4">Bienvenido</h2>
-          <p className="text-gray-600 mb-6">
-            Este es un ejemplo de integración del Chat Widget en Next.js 13+
-            usando el App Router y Server/Client Components.
-          </p>
-          
-          {/* Client Component con control del chat */}
-          <ChatButton_1.ChatButton />
-        </div>
-      </div>
-    </main>);
-}
-// ========== components/ChatButton.tsx (Client Component) ==========
-'use client';
-var chat_widget_standalone_2 = require("@botuyo/chat-widget-standalone");
-function ChatButton() {
-    var chat = (0, chat_widget_standalone_2.useChatWidget)();
-    return (<div className="space-y-4">
-      <div className="flex gap-3">
-        <button onClick={chat.open} className="flex-1 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-semibold transition">
-          Abrir Chat
-        </button>
-
-        <button onClick={function () { return chat.sendMessage('Hola, necesito información'); }} className="flex-1 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold transition">
-          Mensaje Rápido
-        </button>
-      </div>
-
-      {chat.unreadCount > 0 && (<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <p className="text-yellow-800">
-            Tienes {chat.unreadCount} mensaje(s) nuevo(s)
-          </p>
-        </div>)}
-    </div>);
-}
-// ========== app/products/[id]/page.tsx (Dynamic Route con Context) ==========
-'use client';
-function ProductPage(_a) {
-    var params = _a.params;
-    return (<chat_widget_standalone_1.ChatWidgetProvider apiKey={process.env.NEXT_PUBLIC_CHAT_API_KEY} apiBaseUrl={process.env.NEXT_PUBLIC_CHAT_API_URL} pageContext={{
-            page: 'Product',
-            productId: params.id,
-            url: window.location.href,
-            // Cualquier información relevante del producto
-        }} theme={{
-            primaryColor: '#10b981',
-            welcomeMessage: "\u00BFTienes preguntas sobre este producto? \uD83D\uDECD\uFE0F",
-        }}>
-      <div>
-        <h1>Producto {params.id}</h1>
-        {/* Contenido del producto */}
-      </div>
-    </chat_widget_standalone_1.ChatWidgetProvider>);
-}
-// ========== .env.local ==========
-/*
-NEXT_PUBLIC_CHAT_API_KEY=your-api-key-here
-NEXT_PUBLIC_CHAT_API_URL=https://api.botuyo.com
-*/
-// ========== next.config.js ==========
-/*
-/** @type {import('next').NextConfig} *\/
-const nextConfig = {
-  reactStrictMode: true,
-  transpilePackages: ['@botuyo/chat-widget-standalone'],
-}
-
-module.exports = nextConfig
-*/
-// ========== tsconfig.json ==========
-/*
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**\/*.ts", "**\/*.tsx", ".next/types/**\/*.ts"],
-  "exclude": ["node_modules"]
-}
-*/
-// ========== package.json ==========
-/*
-{
-  "name": "nextjs-chat-widget-example",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@botuyo/chat-widget-standalone": "^1.0.0",
-    "next": "^14.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
-  }
-}
-*/