@botuyo/chat-widget-standalone 1.0.0

package/examples/react-example.js

@@ -0,0 +1,168 @@
+"use strict";
+// @ts-nocheck
+/**
+ * Ejemplo de uso del Chat Widget en una aplicación React con TypeScript
+ * Usando el ChatWidgetProvider para acceso global al estado del chat
+ *
+ * NOTA: Este es código de ejemplo y no se incluye en el build de producción.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = App;
+var react_1 = require("react");
+var chat_widget_standalone_1 = require("@botuyo/chat-widget-standalone");
+// ========== Configuración del Tema ==========
+var chatTheme = {
+    primaryColor: '#10b981',
+    botName: 'Asistente BotUyo',
+    logoUrl: '/logo.png',
+    position: 'bottom-right',
+    welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte hoy?',
+    inputPlaceholder: 'Escribe tu mensaje aquí...',
+    borderRadius: '1rem',
+    launcherBorderRadius: '50%',
+    starterPrompt: '¿Necesitas ayuda? 💬',
+    bubbleStyles: {
+        radius: {
+            bubble: 'rounded-2xl',
+            image: 'rounded-xl',
+            button: 'rounded-full',
+            card: 'rounded-2xl'
+        },
+        bot: {
+            bg: 'bg-gray-100',
+            text: 'text-gray-900',
+            border: 'border-gray-200'
+        },
+        launcher: {
+            pulse: true
+        }
+    }
+};
+// ========== Componente con botones de control ==========
+function ChatControls() {
+    var chat = (0, chat_widget_standalone_1.useChatWidget)();
+    return (<div className="p-6 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">Control del Chat</h2>
+      
+      <div className="space-y-3">
+        <button onClick={chat.open} className="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition">
+          🚀 Abrir Chat
+        </button>
+
+        <button onClick={chat.close} className="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">
+          ❌ Cerrar Chat
+        </button>
+
+        <button onClick={chat.toggle} className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
+          🔄 Toggle Chat
+        </button>
+
+        <button onClick={function () { return chat.sendMessage('Hola, necesito ayuda con mi reserva'); }} className="w-full bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition">
+          💬 Mensaje Rápido
+        </button>
+
+        <button onClick={chat.clearMessages} className="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
+          🗑️ Limpiar Historial
+        </button>
+      </div>
+
+      <div className="mt-6 p-4 bg-gray-100 rounded-lg">
+        <h3 className="font-semibold mb-2">Estado:</h3>
+        <ul className="space-y-1 text-sm">
+          <li>
+            Estado: <strong>{chat.isOpen ? '✅ Abierto' : '❌ Cerrado'}</strong>
+          </li>
+          <li>
+            Mensajes sin leer: <strong className="text-green-600">{chat.unreadCount}</strong>
+          </li>
+        </ul>
+      </div>
+    </div>);
+}
+// ========== Botón flotante personalizado (opcional) ==========
+function _CustomFloatingButton() {
+    var chat = (0, chat_widget_standalone_1.useChatWidget)();
+    return (<button onClick={chat.toggle} className="fixed bottom-4 left-4 bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-full shadow-lg transition transform hover:scale-110" aria-label="Toggle Chat">
+      💬 
+      {chat.unreadCount > 0 && (<span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-6 w-6 flex items-center justify-center">
+          {chat.unreadCount}
+        </span>)}
+    </button>);
+}
+// ========== Layout Principal ==========
+function AppContent() {
+    return (<div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
+      <div className="container mx-auto px-4 py-12">
+        <header className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-800 mb-4">
+            🎉 Ejemplo React + TypeScript
+          </h1>
+          <p className="text-gray-600 max-w-2xl mx-auto">
+            Este ejemplo muestra cómo integrar el Chat Widget en una aplicación React
+            usando el <code className="bg-gray-200 px-2 py-1 rounded">ChatWidgetProvider</code> y 
+            el hook <code className="bg-gray-200 px-2 py-1 rounded">useChatWidget()</code>.
+          </p>
+        </header>
+
+        <div className="max-w-md mx-auto">
+          <ChatControls />
+        </div>
+
+        {/* Botón flotante personalizado (opcional, el widget ya tiene uno) */}
+        {/* <CustomFloatingButton /> */}
+      </div>
+    </div>);
+}
+// ========== App Root con Provider ==========
+function App() {
+    return (<chat_widget_standalone_1.ChatWidgetProvider 
+    // Configuración requerida
+    apiKey={process.env.REACT_APP_CHAT_API_KEY || 'demo-api-key'} apiBaseUrl={process.env.REACT_APP_CHAT_API_URL || 'https://api.botuyo.com'} 
+    // Tema personalizado
+    theme={chatTheme} 
+    // Contexto de página
+    pageContext={{
+            page: 'React Example',
+            url: window.location.href,
+            title: 'React TypeScript Example'
+        }} 
+    // Metadata SEO automática
+    includeSEOMetadata={true} 
+    // Estado inicial (opcional)
+    initialState={{
+            isOpen: false
+        }} 
+    // Callbacks
+    onStateChange={function (isOpen) {
+            console.log('Chat widget:', isOpen ? 'opened' : 'closed');
+        }} onNavigate={function (url) {
+            console.log('Navigate to:', url);
+            // Usar React Router aquí si lo necesitas
+            window.location.href = url;
+        }} onLogin={function (userData) {
+            console.log('User logged in:', userData);
+            // Guardar token, actualizar estado global, etc.
+        }} onEvent={function (eventName, data) {
+            console.log('Event:', eventName, data);
+        }}>
+      <AppContent />
+    </chat_widget_standalone_1.ChatWidgetProvider>);
+}
+// ========== Tipos disponibles para importar ==========
+/*
+import type {
+  ChatWidgetProps,
+  ChatWidgetProviderProps,
+  ChatWidgetContextValue,
+  ChatTheme,
+  BubbleStyles,
+  UserContext,
+  PageContext,
+  ChatMessage,
+  TextMessage,
+  ImageMessage,
+  AudioMessage,
+  LocationMessage,
+  AuthenticatedUser
+} from '@botuyo/chat-widget-standalone';
+*/

package/examples/react-example.tsx

@@ -0,0 +1,221 @@
+// @ts-nocheck
+/**
+ * Ejemplo de uso del Chat Widget en una aplicación React con TypeScript
+ * Usando el ChatWidgetProvider para acceso global al estado del chat
+ * 
+ * NOTA: Este es código de ejemplo y no se incluye en el build de producción.
+ */
+
+import React from 'react';
+import { 
+  ChatWidgetProvider, 
+  useChatWidget,
+  type ChatWidgetProviderProps as _ChatWidgetProviderProps,
+  type ChatTheme 
+} from '@botuyo/chat-widget-standalone';
+
+// ========== Configuración del Tema ==========
+const chatTheme: ChatTheme = {
+  primaryColor: '#10b981',
+  botName: 'Asistente BotUyo',
+  logoUrl: '/logo.png',
+  position: 'bottom-right',
+  welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte hoy?',
+  inputPlaceholder: 'Escribe tu mensaje aquí...',
+  borderRadius: '1rem',
+  launcherBorderRadius: '50%',
+  starterPrompt: '¿Necesitas ayuda? 💬',
+  bubbleStyles: {
+    radius: {
+      bubble: 'rounded-2xl',
+      image: 'rounded-xl',
+      button: 'rounded-full',
+      card: 'rounded-2xl'
+    },
+    bot: {
+      bg: 'bg-gray-100',
+      text: 'text-gray-900',
+      border: 'border-gray-200'
+    },
+    launcher: {
+      pulse: true
+    }
+  }
+};
+
+// ========== Componente con botones de control ==========
+function ChatControls() {
+  const chat = useChatWidget();
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">Control del Chat</h2>
+      
+      <div className="space-y-3">
+        <button
+          onClick={chat.open}
+          className="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition"
+        >
+          🚀 Abrir Chat
+        </button>
+
+        <button
+          onClick={chat.close}
+          className="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition"
+        >
+          ❌ Cerrar Chat
+        </button>
+
+        <button
+          onClick={chat.toggle}
+          className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition"
+        >
+          🔄 Toggle Chat
+        </button>
+
+        <button
+          onClick={() => chat.sendMessage('Hola, necesito ayuda con mi reserva')}
+          className="w-full bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition"
+        >
+          💬 Mensaje Rápido
+        </button>
+
+        <button
+          onClick={chat.clearMessages}
+          className="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition"
+        >
+          🗑️ Limpiar Historial
+        </button>
+      </div>
+
+      <div className="mt-6 p-4 bg-gray-100 rounded-lg">
+        <h3 className="font-semibold mb-2">Estado:</h3>
+        <ul className="space-y-1 text-sm">
+          <li>
+            Estado: <strong>{chat.isOpen ? '✅ Abierto' : '❌ Cerrado'}</strong>
+          </li>
+          <li>
+            Mensajes sin leer: <strong className="text-green-600">{chat.unreadCount}</strong>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+// ========== Botón flotante personalizado (opcional) ==========
+function _CustomFloatingButton() {
+  const chat = useChatWidget();
+
+  return (
+    <button
+      onClick={chat.toggle}
+      className="fixed bottom-4 left-4 bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-full shadow-lg transition transform hover:scale-110"
+      aria-label="Toggle Chat"
+    >
+      💬 
+      {chat.unreadCount > 0 && (
+        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-6 w-6 flex items-center justify-center">
+          {chat.unreadCount}
+        </span>
+      )}
+    </button>
+  );
+}
+
+// ========== Layout Principal ==========
+function AppContent() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
+      <div className="container mx-auto px-4 py-12">
+        <header className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-800 mb-4">
+            🎉 Ejemplo React + TypeScript
+          </h1>
+          <p className="text-gray-600 max-w-2xl mx-auto">
+            Este ejemplo muestra cómo integrar el Chat Widget en una aplicación React
+            usando el <code className="bg-gray-200 px-2 py-1 rounded">ChatWidgetProvider</code> y 
+            el hook <code className="bg-gray-200 px-2 py-1 rounded">useChatWidget()</code>.
+          </p>
+        </header>
+
+        <div className="max-w-md mx-auto">
+          <ChatControls />
+        </div>
+
+        {/* Botón flotante personalizado (opcional, el widget ya tiene uno) */}
+        {/* <CustomFloatingButton /> */}
+      </div>
+    </div>
+  );
+}
+
+// ========== App Root con Provider ==========
+export default function App() {
+  return (
+    <ChatWidgetProvider
+      // Configuración requerida
+      apiKey={process.env.REACT_APP_CHAT_API_KEY || 'demo-api-key'}
+      apiBaseUrl={process.env.REACT_APP_CHAT_API_URL || 'https://api.botuyo.com'}
+      
+      // Tema personalizado
+      theme={chatTheme}
+      
+      // Contexto de página
+      pageContext={{
+        page: 'React Example',
+        url: window.location.href,
+        title: 'React TypeScript Example'
+      }}
+      
+      // Metadata SEO automática
+      includeSEOMetadata={true}
+      
+      // Estado inicial (opcional)
+      initialState={{
+        isOpen: false
+      }}
+      
+      // Callbacks
+      onStateChange={(isOpen) => {
+        console.log('Chat widget:', isOpen ? 'opened' : 'closed');
+      }}
+      
+      onNavigate={(url) => {
+        console.log('Navigate to:', url);
+        // Usar React Router aquí si lo necesitas
+        window.location.href = url;
+      }}
+      
+      onLogin={(userData) => {
+        console.log('User logged in:', userData);
+        // Guardar token, actualizar estado global, etc.
+      }}
+      
+      onEvent={(eventName, data) => {
+        console.log('Event:', eventName, data);
+      }}
+    >
+      <AppContent />
+    </ChatWidgetProvider>
+  );
+}
+
+// ========== Tipos disponibles para importar ==========
+/*
+import type {
+  ChatWidgetProps,
+  ChatWidgetProviderProps,
+  ChatWidgetContextValue,
+  ChatTheme,
+  BubbleStyles,
+  UserContext,
+  PageContext,
+  ChatMessage,
+  TextMessage,
+  ImageMessage,
+  AudioMessage,
+  LocationMessage,
+  AuthenticatedUser
+} from '@botuyo/chat-widget-standalone';
+*/

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "@botuyo/chat-widget-standalone",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "BotUyo Chat Widget - Standalone CDN version with React/TypeScript support",
+  "main": "dist/botuyo-chat.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/standalone.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/standalone.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/botuyo-chat.js"
+    },
+    "./react": {
+      "types": "./dist/chat-widget/index.d.ts",
+      "import": "./dist/index.esm.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run clean && vite build && npm run build:types",
+    "build:types": "tsc --project tsconfig.build.json",
+    "preview": "vite preview",
+    "clean": "npx rimraf dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\""
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "keywords": [
+    "chat",
+    "widget",
+    "chatbot",
+    "customer-support",
+    "botuyo",
+    "standalone",
+    "cdn",
+    "react",
+    "typescript",
+    "nextjs",
+    "socket.io"
+  ],
+  "author": "BotUyo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/botuyo/chat-widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/botuyo/chat-widget/issues"
+  },
+  "homepage": "https://github.com/botuyo/chat-widget#readme",
+  "devDependencies": {
+    "@axe-core/playwright": "^4.11.0",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.58.0",
+    "@storybook/addon-a11y": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-onboarding": "^10.2.0",
+    "@storybook/addon-vitest": "^10.2.0",
+    "@storybook/react-vite": "^10.2.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "autoprefixer": "^10.4.23",
+    "axe-core": "^4.11.1",
+    "cssnano": "^7.1.2",
+    "cssnano-preset-advanced": "^7.0.10",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^10.2.0",
+    "globals": "^17.1.0",
+    "happy-dom": "^20.3.7",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.58.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "rehype-sanitize": "^6.0.0",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "storybook": "^10.2.0",
+    "tailwindcss": "^4.1.18",
+    "terser": "^5.46.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "browser-image-compression": "^2.0.2",
+    "clsx": "^2.1.1",
+    "idb": "^8.0.3",
+    "lucide-react": "^0.563.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "socket.io-client": "^4.7.4",
+    "tailwind-merge": "^3.4.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "INSTALLATION_GUIDE.md",
+    "LICENSE",
+    "examples"
+  ]
+}