npm - @botuyo/chat-widget-standalone - Versions diffs - 1.0.0 - Mend

@botuyo/chat-widget-standalone 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/LICENSE +21 -0
package/README.md +438 -0
package/dist/ChatWidget-B6W68bT_.js +33 -0
package/dist/ChatWidget-B6W68bT_.js.map +1 -0
package/dist/botuyo-chat.css +1 -0
package/dist/botuyo-chat.js +2 -0
package/dist/botuyo-chat.js.map +1 -0
package/dist/browser-image-compression-CsxM8KJN.js +2 -0
package/dist/browser-image-compression-CsxM8KJN.js.map +1 -0
package/dist/chunk-audio-CgduwQLl.js +10 -0
package/dist/chunk-audio-CgduwQLl.js.map +1 -0
package/dist/chunk-chat-ui-EAAXXtnK.js +89 -0
package/dist/chunk-chat-ui-EAAXXtnK.js.map +1 -0
package/dist/chunk-gallery-B9sBFYYc.js +24 -0
package/dist/chunk-gallery-B9sBFYYc.js.map +1 -0
package/dist/chunk-markdown-xGy7kpWU.js +2 -0
package/dist/chunk-markdown-xGy7kpWU.js.map +1 -0
package/dist/stats.html +4949 -0
package/dist/vendor-react-CtfcjTlq.js +2 -0
package/dist/vendor-react-CtfcjTlq.js.map +1 -0
package/dist/vendor-socket-DMqyM-90.js +2 -0
package/dist/vendor-socket-DMqyM-90.js.map +1 -0
package/examples/cdn-example.html +226 -0
package/examples/nextjs-example.js +188 -0
package/examples/nextjs-example.tsx +229 -0
package/examples/react-example.js +168 -0
package/examples/react-example.tsx +221 -0
package/package.json +147 -0

package/examples/cdn-example.html ADDED Viewed

@@ -0,0 +1,226 @@
+<!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 ADDED Viewed

@@ -0,0 +1,188 @@
+"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"
+  }
+}
+*/

package/examples/nextjs-example.tsx ADDED Viewed

@@ -0,0 +1,229 @@
+// @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.
+ */
+// ========== app/layout.tsx (Root Layout) ==========
+import { ChatWidgetProvider } from '@botuyo/chat-widget-standalone';
+import type { Metadata } from 'next';
+import './globals.css';
+export const metadata: Metadata = {
+  title: 'Mi App con Chat Widget',
+  description: 'Ejemplo de integración del Chat Widget en Next.js',
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="es">
+      <body>
+        <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={(url) => {
+            // Next.js navigation
+            window.location.href = url;
+          }}
+        >
+          {children}
+        </ChatWidgetProvider>
+      </body>
+    </html>
+  );
+}
+// ========== app/page.tsx (Homepage - Server Component) ==========
+import { ChatButton } from '@/components/ChatButton';
+export default 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 />
+        </div>
+      </div>
+    </main>
+  );
+}
+// ========== components/ChatButton.tsx (Client Component) ==========
+'use client';
+import { useChatWidget } from '@botuyo/chat-widget-standalone';
+export function ChatButton() {
+  const chat = 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={() => 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';
+import { useEffect as _useEffect } from 'react';
+import { ChatWidgetProvider } from '@botuyo/chat-widget-standalone';
+export default function ProductPage({ params }: { params: { id: string } }) {
+  return (
+    <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: `¿Tienes preguntas sobre este producto? 🛍️`,
+      }}
+    >
+      <div>
+        <h1>Producto {params.id}</h1>
+        {/* Contenido del producto */}
+      </div>
+    </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"
+  }
+}
+*/