@botuyo/chat-widget-standalone 1.0.61 → 1.0.63

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 (42) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +302 -323
  3. package/dist/Avatar3D-LfNJe183.js.map +1 -1
  4. package/dist/botuyo-chat.es.js +35 -36
  5. package/dist/botuyo-chat.es.js.map +1 -1
  6. package/dist/botuyo-chat.umd.js +1 -1
  7. package/dist/botuyo-chat.umd.js.map +1 -1
  8. package/dist/{chunk-audio-BWzosE4G.js → chunk-audio-D3yXcqpi.js} +2 -2
  9. package/dist/chunk-audio-D3yXcqpi.js.map +1 -0
  10. package/dist/{chunk-chat-ui-DdO5hnyL.js → chunk-chat-ui-DHu5_wQn.js} +32 -32
  11. package/dist/chunk-chat-ui-DHu5_wQn.js.map +1 -0
  12. package/dist/{chunk-gallery-D3t-QnJv.js → chunk-gallery-CJ1ehwV0.js} +2 -2
  13. package/dist/chunk-gallery-CJ1ehwV0.js.map +1 -0
  14. package/dist/src/chat-widget/ChatWidget.d.ts.map +1 -1
  15. package/dist/src/chat-widget/components/Gallery.stories.d.ts.map +1 -1
  16. package/dist/src/chat-widget/components/MessageBubble.d.ts.map +1 -1
  17. package/dist/src/chat-widget/components/MessageList.d.ts.map +1 -1
  18. package/dist/src/chat-widget/hooks/useChatSocket.d.ts.map +1 -1
  19. package/dist/src/chat-widget/hooks/useWidgetTheme.d.ts +1 -1
  20. package/dist/src/chat-widget/types/index.d.ts +20 -0
  21. package/dist/src/chat-widget/types/index.d.ts.map +1 -1
  22. package/dist/src/chat-widget/utils/theme.d.ts +3 -2
  23. package/dist/src/chat-widget/utils/theme.d.ts.map +1 -1
  24. package/dist/standalone.d.ts +6 -1
  25. package/dist/standalone.d.ts.map +1 -1
  26. package/dist/stats-umd.html +1 -1
  27. package/dist/stats.html +1 -1
  28. package/package.json +155 -155
  29. package/dist/ShadowChatWidget.d.ts +0 -25
  30. package/dist/ShadowChatWidget.d.ts.map +0 -1
  31. package/dist/chunk-audio-BWzosE4G.js.map +0 -1
  32. package/dist/chunk-chat-ui-DdO5hnyL.js.map +0 -1
  33. package/dist/chunk-gallery-D3t-QnJv.js.map +0 -1
  34. package/dist/src/chat-widget/utils/theme.examples.d.ts +0 -47
  35. package/dist/src/chat-widget/utils/theme.examples.d.ts.map +0 -1
  36. package/dist/src/chat-widget/utils/themes/index.d.ts +0 -12
  37. package/dist/src/chat-widget/utils/themes/index.d.ts.map +0 -1
  38. package/examples/cdn-example.html +0 -226
  39. package/examples/nextjs-example.js +0 -188
  40. package/examples/nextjs-example.tsx +0 -229
  41. package/examples/react-example.js +0 -168
  42. package/examples/react-example.tsx +0 -221
package/examples/nextjs-example.tsx DELETED
@@ -1,229 +0,0 @@
1
- // @ts-nocheck
2
- /**
3
- * Ejemplo de uso del Chat Widget en Next.js 13+ (App Router)
4
- * Con TypeScript, Server Components y Client Components
5
- *
6
- * ⚠️ NOTA: Este archivo contiene MÚLTIPLES EJEMPLOS de código en secciones separadas.
7
- * NO está diseñado para ejecutarse directamente - es un archivo de REFERENCIA.
8
- * Copia las secciones individuales que necesites a tus propios archivos.
9
- *
10
- * Los errores de "Duplicate identifier" son esperados porque hay múltiples
11
- * ejemplos de imports en diferentes secciones del mismo archivo.
12
- */
13
-
14
- // ========== app/layout.tsx (Root Layout) ==========
15
- import { ChatWidgetProvider } from '@botuyo/chat-widget-standalone';
16
- import type { Metadata } from 'next';
17
- import './globals.css';
18
-
19
- export const metadata: Metadata = {
20
- title: 'Mi App con Chat Widget',
21
- description: 'Ejemplo de integración del Chat Widget en Next.js',
22
- };
23
-
24
- export default function RootLayout({
25
- children,
26
- }: {
27
- children: React.ReactNode;
28
- }) {
29
- return (
30
- <html lang="es">
31
- <body>
32
- <ChatWidgetProvider
33
- apiKey={process.env.NEXT_PUBLIC_CHAT_API_KEY!}
34
- apiBaseUrl={process.env.NEXT_PUBLIC_CHAT_API_URL!}
35
- theme={{
36
- primaryColor: '#10b981',
37
- botName: 'Asistente BotUyo',
38
- position: 'bottom-right',
39
- welcomeMessage: '¡Hola! 👋 ¿Cómo puedo ayudarte?',
40
- bubbleStyles: {
41
- launcher: {
42
- pulse: true
43
- }
44
- }
45
- }}
46
- includeSEOMetadata={true}
47
- onNavigate={(url) => {
48
- // Next.js navigation
49
- window.location.href = url;
50
- }}
51
- >
52
- {children}
53
- </ChatWidgetProvider>
54
- </body>
55
- </html>
56
- );
57
- }
58
-
59
- // ========== app/page.tsx (Homepage - Server Component) ==========
60
- import { ChatButton } from '@/components/ChatButton';
61
-
62
- export default function HomePage() {
63
- return (
64
- <main className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
65
- <div className="container mx-auto px-4 py-12">
66
- <h1 className="text-4xl font-bold text-center mb-8">
67
- Next.js + Chat Widget
68
- </h1>
69
-
70
- <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-lg">
71
- <h2 className="text-2xl font-semibold mb-4">Bienvenido</h2>
72
- <p className="text-gray-600 mb-6">
73
- Este es un ejemplo de integración del Chat Widget en Next.js 13+
74
- usando el App Router y Server/Client Components.
75
- </p>
76
-
77
- {/* Client Component con control del chat */}
78
- <ChatButton />
79
- </div>
80
- </div>
81
- </main>
82
- );
83
- }
84
-
85
- // ========== components/ChatButton.tsx (Client Component) ==========
86
- 'use client';
87
-
88
- import { useChatWidget } from '@botuyo/chat-widget-standalone';
89
-
90
- export function ChatButton() {
91
- const chat = useChatWidget();
92
-
93
- return (
94
- <div className="space-y-4">
95
- <div className="flex gap-3">
96
- <button
97
- onClick={chat.open}
98
- className="flex-1 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-semibold transition"
99
- >
100
- Abrir Chat
101
- </button>
102
-
103
- <button
104
- onClick={() => chat.sendMessage('Hola, necesito información')}
105
- className="flex-1 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold transition"
106
- >
107
- Mensaje Rápido
108
- </button>
109
- </div>
110
-
111
- {chat.unreadCount > 0 && (
112
- <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
113
- <p className="text-yellow-800">
114
- Tienes {chat.unreadCount} mensaje(s) nuevo(s)
115
- </p>
116
- </div>
117
- )}
118
- </div>
119
- );
120
- }
121
-
122
- // ========== app/products/[id]/page.tsx (Dynamic Route con Context) ==========
123
- 'use client';
124
-
125
- import { useEffect as _useEffect } from 'react';
126
- import { ChatWidgetProvider } from '@botuyo/chat-widget-standalone';
127
-
128
- export default function ProductPage({ params }: { params: { id: string } }) {
129
- return (
130
- <ChatWidgetProvider
131
- apiKey={process.env.NEXT_PUBLIC_CHAT_API_KEY!}
132
- apiBaseUrl={process.env.NEXT_PUBLIC_CHAT_API_URL!}
133
- pageContext={{
134
- page: 'Product',
135
- productId: params.id,
136
- url: window.location.href,
137
- // Cualquier información relevante del producto
138
- }}
139
- theme={{
140
- primaryColor: '#10b981',
141
- welcomeMessage: `¿Tienes preguntas sobre este producto? 🛍️`,
142
- }}
143
- >
144
- <div>
145
- <h1>Producto {params.id}</h1>
146
- {/* Contenido del producto */}
147
- </div>
148
- </ChatWidgetProvider>
149
- );
150
- }
151
-
152
- // ========== .env.local ==========
153
- /*
154
- NEXT_PUBLIC_CHAT_API_KEY=your-api-key-here
155
- NEXT_PUBLIC_CHAT_API_URL=https://api.botuyo.com
156
- */
157
-
158
- // ========== next.config.js ==========
159
- /*
160
- /** @type {import('next').NextConfig} *\/
161
- const nextConfig = {
162
- reactStrictMode: true,
163
- transpilePackages: ['@botuyo/chat-widget-standalone'],
164
- }
165
-
166
- module.exports = nextConfig
167
- */
168
-
169
- // ========== tsconfig.json ==========
170
- /*
171
- {
172
- "compilerOptions": {
173
- "target": "ES2020",
174
- "lib": ["dom", "dom.iterable", "esnext"],
175
- "allowJs": true,
176
- "skipLibCheck": true,
177
- "strict": true,
178
- "forceConsistentCasingInFileNames": true,
179
- "noEmit": true,
180
- "esModuleInterop": true,
181
- "module": "esnext",
182
- "moduleResolution": "bundler",
183
- "resolveJsonModule": true,
184
- "isolatedModules": true,
185
- "jsx": "preserve",
186
- "incremental": true,
187
- "plugins": [
188
- {
189
- "name": "next"
190
- }
191
- ],
192
- "paths": {
193
- "@/*": ["./src/*"]
194
- }
195
- },
196
- "include": ["next-env.d.ts", "**\/*.ts", "**\/*.tsx", ".next/types/**\/*.ts"],
197
- "exclude": ["node_modules"]
198
- }
199
- */
200
-
201
- // ========== package.json ==========
202
- /*
203
- {
204
- "name": "nextjs-chat-widget-example",
205
- "version": "0.1.0",
206
- "private": true,
207
- "scripts": {
208
- "dev": "next dev",
209
- "build": "next build",
210
- "start": "next start",
211
- "lint": "next lint"
212
- },
213
- "dependencies": {
214
- "@botuyo/chat-widget-standalone": "^1.0.0",
215
- "next": "^14.0.0",
216
- "react": "^18.2.0",
217
- "react-dom": "^18.2.0"
218
- },
219
- "devDependencies": {
220
- "@types/node": "^20",
221
- "@types/react": "^18",
222
- "@types/react-dom": "^18",
223
- "autoprefixer": "^10.0.1",
224
- "postcss": "^8",
225
- "tailwindcss": "^3.3.0",
226
- "typescript": "^5"
227
- }
228
- }
229
- */
package/examples/react-example.js DELETED
@@ -1,168 +0,0 @@
1
- "use strict";
2
- // @ts-nocheck
3
- /**
4
- * Ejemplo de uso del Chat Widget en una aplicación React con TypeScript
5
- * Usando el ChatWidgetProvider para acceso global al estado del chat
6
- *
7
- * NOTA: Este es código de ejemplo y no se incluye en el build de producción.
8
- */
9
- Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.default = App;
11
- var react_1 = require("react");
12
- var chat_widget_standalone_1 = require("@botuyo/chat-widget-standalone");
13
- // ========== Configuración del Tema ==========
14
- var chatTheme = {
15
- primaryColor: '#10b981',
16
- botName: 'Asistente BotUyo',
17
- logoUrl: '/logo.png',
18
- position: 'bottom-right',
19
- welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte hoy?',
20
- inputPlaceholder: 'Escribe tu mensaje aquí...',
21
- borderRadius: '1rem',
22
- launcherBorderRadius: '50%',
23
- starterPrompt: '¿Necesitas ayuda? 💬',
24
- bubbleStyles: {
25
- radius: {
26
- bubble: 'rounded-2xl',
27
- image: 'rounded-xl',
28
- button: 'rounded-full',
29
- card: 'rounded-2xl'
30
- },
31
- bot: {
32
- bg: 'bg-gray-100',
33
- text: 'text-gray-900',
34
- border: 'border-gray-200'
35
- },
36
- launcher: {
37
- pulse: true
38
- }
39
- }
40
- };
41
- // ========== Componente con botones de control ==========
42
- function ChatControls() {
43
- var chat = (0, chat_widget_standalone_1.useChatWidget)();
44
- return (<div className="p-6 bg-white rounded-lg shadow-lg">
45
- <h2 className="text-2xl font-bold mb-4">Control del Chat</h2>
46
-
47
- <div className="space-y-3">
48
- <button onClick={chat.open} className="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition">
49
- 🚀 Abrir Chat
50
- </button>
51
-
52
- <button onClick={chat.close} className="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">
53
- ❌ Cerrar Chat
54
- </button>
55
-
56
- <button onClick={chat.toggle} className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
57
- 🔄 Toggle Chat
58
- </button>
59
-
60
- <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">
61
- 💬 Mensaje Rápido
62
- </button>
63
-
64
- <button onClick={chat.clearMessages} className="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
65
- 🗑️ Limpiar Historial
66
- </button>
67
- </div>
68
-
69
- <div className="mt-6 p-4 bg-gray-100 rounded-lg">
70
- <h3 className="font-semibold mb-2">Estado:</h3>
71
- <ul className="space-y-1 text-sm">
72
- <li>
73
- Estado: <strong>{chat.isOpen ? '✅ Abierto' : '❌ Cerrado'}</strong>
74
- </li>
75
- <li>
76
- Mensajes sin leer: <strong className="text-green-600">{chat.unreadCount}</strong>
77
- </li>
78
- </ul>
79
- </div>
80
- </div>);
81
- }
82
- // ========== Botón flotante personalizado (opcional) ==========
83
- function _CustomFloatingButton() {
84
- var chat = (0, chat_widget_standalone_1.useChatWidget)();
85
- 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">
86
- 💬
87
- {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">
88
- {chat.unreadCount}
89
- </span>)}
90
- </button>);
91
- }
92
- // ========== Layout Principal ==========
93
- function AppContent() {
94
- return (<div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
95
- <div className="container mx-auto px-4 py-12">
96
- <header className="text-center mb-12">
97
- <h1 className="text-4xl font-bold text-gray-800 mb-4">
98
- 🎉 Ejemplo React + TypeScript
99
- </h1>
100
- <p className="text-gray-600 max-w-2xl mx-auto">
101
- Este ejemplo muestra cómo integrar el Chat Widget en una aplicación React
102
- usando el <code className="bg-gray-200 px-2 py-1 rounded">ChatWidgetProvider</code> y
103
- el hook <code className="bg-gray-200 px-2 py-1 rounded">useChatWidget()</code>.
104
- </p>
105
- </header>
106
-
107
- <div className="max-w-md mx-auto">
108
- <ChatControls />
109
- </div>
110
-
111
- {/* Botón flotante personalizado (opcional, el widget ya tiene uno) */}
112
- {/* <CustomFloatingButton /> */}
113
- </div>
114
- </div>);
115
- }
116
- // ========== App Root con Provider ==========
117
- function App() {
118
- return (<chat_widget_standalone_1.ChatWidgetProvider
119
- // Configuración requerida
120
- apiKey={process.env.REACT_APP_CHAT_API_KEY || 'demo-api-key'} apiBaseUrl={process.env.REACT_APP_CHAT_API_URL || 'https://api.botuyo.com'}
121
- // Tema personalizado
122
- theme={chatTheme}
123
- // Contexto de página
124
- pageContext={{
125
- page: 'React Example',
126
- url: window.location.href,
127
- title: 'React TypeScript Example'
128
- }}
129
- // Metadata SEO automática
130
- includeSEOMetadata={true}
131
- // Estado inicial (opcional)
132
- initialState={{
133
- isOpen: false
134
- }}
135
- // Callbacks
136
- onStateChange={function (isOpen) {
137
- console.log('Chat widget:', isOpen ? 'opened' : 'closed');
138
- }} onNavigate={function (url) {
139
- console.log('Navigate to:', url);
140
- // Usar React Router aquí si lo necesitas
141
- window.location.href = url;
142
- }} onLogin={function (userData) {
143
- console.log('User logged in:', userData);
144
- // Guardar token, actualizar estado global, etc.
145
- }} onEvent={function (eventName, data) {
146
- console.log('Event:', eventName, data);
147
- }}>
148
- <AppContent />
149
- </chat_widget_standalone_1.ChatWidgetProvider>);
150
- }
151
- // ========== Tipos disponibles para importar ==========
152
- /*
153
- import type {
154
- ChatWidgetProps,
155
- ChatWidgetProviderProps,
156
- ChatWidgetContextValue,
157
- ChatTheme,
158
- BubbleStyles,
159
- UserContext,
160
- PageContext,
161
- ChatMessage,
162
- TextMessage,
163
- ImageMessage,
164
- AudioMessage,
165
- LocationMessage,
166
- AuthenticatedUser
167
- } from '@botuyo/chat-widget-standalone';
168
- */
package/examples/react-example.tsx DELETED
@@ -1,221 +0,0 @@
1
- // @ts-nocheck
2
- /**
3
- * Ejemplo de uso del Chat Widget en una aplicación React con TypeScript
4
- * Usando el ChatWidgetProvider para acceso global al estado del chat
5
- *
6
- * NOTA: Este es código de ejemplo y no se incluye en el build de producción.
7
- */
8
-
9
- import React from 'react';
10
- import {
11
- ChatWidgetProvider,
12
- useChatWidget,
13
- type ChatWidgetProviderProps as _ChatWidgetProviderProps,
14
- type ChatTheme
15
- } from '@botuyo/chat-widget-standalone';
16
-
17
- // ========== Configuración del Tema ==========
18
- const chatTheme: ChatTheme = {
19
- primaryColor: '#10b981',
20
- botName: 'Asistente BotUyo',
21
- logoUrl: '/logo.png',
22
- position: 'bottom-right',
23
- welcomeMessage: '¡Hola! 👋 ¿En qué puedo ayudarte hoy?',
24
- inputPlaceholder: 'Escribe tu mensaje aquí...',
25
- borderRadius: '1rem',
26
- launcherBorderRadius: '50%',
27
- starterPrompt: '¿Necesitas ayuda? 💬',
28
- bubbleStyles: {
29
- radius: {
30
- bubble: 'rounded-2xl',
31
- image: 'rounded-xl',
32
- button: 'rounded-full',
33
- card: 'rounded-2xl'
34
- },
35
- bot: {
36
- bg: 'bg-gray-100',
37
- text: 'text-gray-900',
38
- border: 'border-gray-200'
39
- },
40
- launcher: {
41
- pulse: true
42
- }
43
- }
44
- };
45
-
46
- // ========== Componente con botones de control ==========
47
- function ChatControls() {
48
- const chat = useChatWidget();
49
-
50
- return (
51
- <div className="p-6 bg-white rounded-lg shadow-lg">
52
- <h2 className="text-2xl font-bold mb-4">Control del Chat</h2>
53
-
54
- <div className="space-y-3">
55
- <button
56
- onClick={chat.open}
57
- className="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition"
58
- >
59
- 🚀 Abrir Chat
60
- </button>
61
-
62
- <button
63
- onClick={chat.close}
64
- className="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition"
65
- >
66
- ❌ Cerrar Chat
67
- </button>
68
-
69
- <button
70
- onClick={chat.toggle}
71
- className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition"
72
- >
73
- 🔄 Toggle Chat
74
- </button>
75
-
76
- <button
77
- onClick={() => chat.sendMessage('Hola, necesito ayuda con mi reserva')}
78
- className="w-full bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition"
79
- >
80
- 💬 Mensaje Rápido
81
- </button>
82
-
83
- <button
84
- onClick={chat.clearMessages}
85
- className="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition"
86
- >
87
- 🗑️ Limpiar Historial
88
- </button>
89
- </div>
90
-
91
- <div className="mt-6 p-4 bg-gray-100 rounded-lg">
92
- <h3 className="font-semibold mb-2">Estado:</h3>
93
- <ul className="space-y-1 text-sm">
94
- <li>
95
- Estado: <strong>{chat.isOpen ? '✅ Abierto' : '❌ Cerrado'}</strong>
96
- </li>
97
- <li>
98
- Mensajes sin leer: <strong className="text-green-600">{chat.unreadCount}</strong>
99
- </li>
100
- </ul>
101
- </div>
102
- </div>
103
- );
104
- }
105
-
106
- // ========== Botón flotante personalizado (opcional) ==========
107
- function _CustomFloatingButton() {
108
- const chat = useChatWidget();
109
-
110
- return (
111
- <button
112
- onClick={chat.toggle}
113
- 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"
114
- aria-label="Toggle Chat"
115
- >
116
- 💬
117
- {chat.unreadCount > 0 && (
118
- <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">
119
- {chat.unreadCount}
120
- </span>
121
- )}
122
- </button>
123
- );
124
- }
125
-
126
- // ========== Layout Principal ==========
127
- function AppContent() {
128
- return (
129
- <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
130
- <div className="container mx-auto px-4 py-12">
131
- <header className="text-center mb-12">
132
- <h1 className="text-4xl font-bold text-gray-800 mb-4">
133
- 🎉 Ejemplo React + TypeScript
134
- </h1>
135
- <p className="text-gray-600 max-w-2xl mx-auto">
136
- Este ejemplo muestra cómo integrar el Chat Widget en una aplicación React
137
- usando el <code className="bg-gray-200 px-2 py-1 rounded">ChatWidgetProvider</code> y
138
- el hook <code className="bg-gray-200 px-2 py-1 rounded">useChatWidget()</code>.
139
- </p>
140
- </header>
141
-
142
- <div className="max-w-md mx-auto">
143
- <ChatControls />
144
- </div>
145
-
146
- {/* Botón flotante personalizado (opcional, el widget ya tiene uno) */}
147
- {/* <CustomFloatingButton /> */}
148
- </div>
149
- </div>
150
- );
151
- }
152
-
153
- // ========== App Root con Provider ==========
154
- export default function App() {
155
- return (
156
- <ChatWidgetProvider
157
- // Configuración requerida
158
- apiKey={process.env.REACT_APP_CHAT_API_KEY || 'demo-api-key'}
159
- apiBaseUrl={process.env.REACT_APP_CHAT_API_URL || 'https://api.botuyo.com'}
160
-
161
- // Tema personalizado
162
- theme={chatTheme}
163
-
164
- // Contexto de página
165
- pageContext={{
166
- page: 'React Example',
167
- url: window.location.href,
168
- title: 'React TypeScript Example'
169
- }}
170
-
171
- // Metadata SEO automática
172
- includeSEOMetadata={true}
173
-
174
- // Estado inicial (opcional)
175
- initialState={{
176
- isOpen: false
177
- }}
178
-
179
- // Callbacks
180
- onStateChange={(isOpen) => {
181
- console.log('Chat widget:', isOpen ? 'opened' : 'closed');
182
- }}
183
-
184
- onNavigate={(url) => {
185
- console.log('Navigate to:', url);
186
- // Usar React Router aquí si lo necesitas
187
- window.location.href = url;
188
- }}
189
-
190
- onLogin={(userData) => {
191
- console.log('User logged in:', userData);
192
- // Guardar token, actualizar estado global, etc.
193
- }}
194
-
195
- onEvent={(eventName, data) => {
196
- console.log('Event:', eventName, data);
197
- }}
198
- >
199
- <AppContent />
200
- </ChatWidgetProvider>
201
- );
202
- }
203
-
204
- // ========== Tipos disponibles para importar ==========
205
- /*
206
- import type {
207
- ChatWidgetProps,
208
- ChatWidgetProviderProps,
209
- ChatWidgetContextValue,
210
- ChatTheme,
211
- BubbleStyles,
212
- UserContext,
213
- PageContext,
214
- ChatMessage,
215
- TextMessage,
216
- ImageMessage,
217
- AudioMessage,
218
- LocationMessage,
219
- AuthenticatedUser
220
- } from '@botuyo/chat-widget-standalone';
221
- */