tia-gpc-widget 1.0.3 → 1.0.5

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 (10) hide show
  1. package/README.md +905 -221
  2. package/dist/tia-gpc-widget.standalone.css +1 -0
  3. package/dist/tia-gpc-widget.standalone.js +206 -0
  4. package/dist/tia-gpc-widget.standalone.js.map +1 -0
  5. package/dist/tia-gpc.cjs.js +9 -8
  6. package/dist/tia-gpc.cjs.js.map +1 -1
  7. package/dist/tia-gpc.css +1 -1
  8. package/dist/tia-gpc.es.js +2026 -1797
  9. package/dist/tia-gpc.es.js.map +1 -1
  10. package/package.json +18 -7
package/README.md CHANGED
@@ -1,9 +1,59 @@
1
1
  # TIA GPC Widget
2
2
 
3
- Librería React para integrar TIA GPC - Sistema de atención al cliente con IA.
3
+ Widget de chat inteligente para integración con TIA GPC. Compatible con **React, HTML puro, Angular, ASP.NET, Vue, y cualquier otro framework**.
4
+
5
+ [![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://www.npmjs.com/package/tia-gpc-widget)
6
+ [![License](https://img.shields.io/badge/license-UNLICENSED-red.svg)](LICENSE)
7
+
8
+ ---
9
+
10
+ ## 📋 Tabla de Contenidos
11
+
12
+ - [Características](#-características)
13
+ - [Instalación](#-instalación)
14
+ - [Opción 1: NPM (Para proyectos React/Node)](#opción-1-npm-para-proyectos-reactnode)
15
+ - [Opción 2: CDN / Script directo (Para HTML, Angular, ASP.NET, etc.)](#opción-2-cdn--script-directo-para-html-angular-aspnet-etc)
16
+ - [Uso Rápido](#-uso-rápido)
17
+ - [Ejemplos por Framework](#-ejemplos-por-framework)
18
+ - [React](#1-react)
19
+ - [HTML Puro / Vanilla JavaScript](#2-html-puro--vanilla-javascript)
20
+ - [Angular](#3-angular)
21
+ - [ASP.NET / ASPX](#4-aspnet--aspx)
22
+ - [Vue.js](#5-vuejs)
23
+ - [Next.js](#6-nextjs)
24
+ - [PHP](#7-php)
25
+ - [API y Configuración](#-api-y-configuración)
26
+ - [Props/Atributos](#propsatributos)
27
+ - [Eventos](#eventos)
28
+ - [API Programática (JavaScript)](#api-programática-javascript)
29
+ - [Personalización](#-personalización)
30
+ - [Temas](#temas)
31
+ - [Posiciones](#posiciones)
32
+ - [Idiomas](#idiomas)
33
+ - [Colores](#colores)
34
+ - [Build y Desarrollo](#-build-y-desarrollo)
35
+ - [Publicación](#-publicación)
36
+ - [Soporte](#-soporte)
37
+
38
+ ---
39
+
40
+ ## 🚀 Características
41
+
42
+ - ✅ **Framework Agnostic**: Funciona en React, Angular, Vue, ASP.NET, HTML puro, etc.
43
+ - ✅ **Web Component**: Basado en estándares web nativos
44
+ - ✅ **Temas**: Modo claro, oscuro o automático
45
+ - ✅ **Internacionalización**: Español, Inglés, Francés
46
+ - ✅ **Responsive**: Diseño adaptable para móviles y escritorio
47
+ - ✅ **Personalizable**: Colores, posiciones, dimensiones
48
+ - ✅ **TypeScript Ready**: Tipos incluidos
49
+ - ✅ **Zero Dependencies**: El bundle standalone incluye todo lo necesario
50
+
51
+ ---
4
52
 
5
53
  ## 📦 Instalación
6
54
 
55
+ ### Opción 1: NPM (Para proyectos React/Node)
56
+
7
57
  ```bash
8
58
  npm install tia-gpc-widget
9
59
  ```
@@ -14,9 +64,64 @@ o con yarn:
14
64
  yarn add tia-gpc-widget
15
65
  ```
16
66
 
17
- ## 🚀 Uso Básico
67
+ o con pnpm:
68
+
69
+ ```bash
70
+ pnpm add tia-gpc-widget
71
+ ```
72
+
73
+ ### Opción 2: CDN / Script directo (Para HTML, Angular, ASP.NET, etc.)
74
+
75
+ Puedes incluir el widget directamente desde un CDN o desde tu servidor:
76
+
77
+ ```html
78
+ <!-- Incluir JavaScript -->
79
+ <script src="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js"></script>
80
+
81
+ <!-- Incluir CSS -->
82
+ <link rel="stylesheet" href="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css">
83
+ ```
84
+
85
+ O si instalaste vía NPM, copia los archivos desde `node_modules/tia-gpc-widget/dist/`:
86
+
87
+ - `tia-gpc-widget.standalone.js`
88
+ - `tia-gpc-widget.standalone.css`
18
89
 
19
- ### React / Vite
90
+ ---
91
+
92
+ ## ⚡ Uso Rápido
93
+
94
+ ### En HTML Puro
95
+
96
+ ```html
97
+ <!DOCTYPE html>
98
+ <html lang="es">
99
+ <head>
100
+ <meta charset="UTF-8">
101
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
102
+ <title>Mi Aplicación con TIA GPC</title>
103
+
104
+ <!-- CSS del widget -->
105
+ <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
106
+ </head>
107
+ <body>
108
+ <h1>Mi Aplicación</h1>
109
+
110
+ <!-- Widget TIA GPC -->
111
+ <tia-gpc-widget
112
+ token="tu-license-token-aqui"
113
+ theme="auto"
114
+ position="bottom-right"
115
+ language="es"
116
+ ></tia-gpc-widget>
117
+
118
+ <!-- JavaScript del widget -->
119
+ <script src="./tia-gpc-widget.standalone.js"></script>
120
+ </body>
121
+ </html>
122
+ ```
123
+
124
+ ### En React
20
125
 
21
126
  ```jsx
22
127
  import { TiaGPCWidget } from 'tia-gpc-widget';
@@ -25,7 +130,13 @@ import 'tia-gpc-widget/styles';
25
130
  function App() {
26
131
  return (
27
132
  <div>
28
- <TiaGPCWidget token="tu-token-de-licencia" />
133
+ <h1>Mi Aplicación</h1>
134
+ <TiaGPCWidget
135
+ token="tu-license-token-aqui"
136
+ theme="auto"
137
+ position="bottom-right"
138
+ language="es"
139
+ />
29
140
  </div>
30
141
  );
31
142
  }
@@ -33,355 +144,928 @@ function App() {
33
144
  export default App;
34
145
  ```
35
146
 
36
- ### Next.js App Router
147
+ ---
37
148
 
38
- ```jsx
39
- // app/layout.js
40
- import { TiaGPCWidget } from 'tia-gpc-widget';
41
- import 'tia-gpc-widget/styles';
149
+ ## 📚 Ejemplos por Framework
42
150
 
43
- export default function RootLayout({ children }) {
44
- return (
45
- <html lang="en">
46
- <body>
47
- {children}
48
- <TiaGPCWidget token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN} />
49
- </body>
50
- </html>
51
- );
52
- }
151
+ ### 1. React
152
+
153
+ #### Instalación
154
+
155
+ ```bash
156
+ npm install tia-gpc-widget
53
157
  ```
54
158
 
55
- ### Next.js Pages Router
159
+ #### Uso Básico
56
160
 
57
161
  ```jsx
58
- // pages/_app.js
59
162
  import { TiaGPCWidget } from 'tia-gpc-widget';
60
163
  import 'tia-gpc-widget/styles';
61
164
 
62
- function MyApp({ Component, pageProps }) {
165
+ function App() {
63
166
  return (
64
- <>
65
- <Component {...pageProps} />
66
- <TiaGPCWidget token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN} />
67
- </>
167
+ <TiaGPCWidget
168
+ token="tu-license-token"
169
+ theme="auto"
170
+ position="bottom-right"
171
+ language="es"
172
+ primaryColor="#2563eb"
173
+ onReady={() => console.log('Widget listo')}
174
+ onError={(error) => console.error('Error:', error)}
175
+ />
68
176
  );
69
177
  }
70
-
71
- export default MyApp;
72
178
  ```
73
179
 
74
- ## ⚙️ Props
75
-
76
- ### Requeridas
77
-
78
- | Prop | Tipo | Descripción |
79
- |------|------|-------------|
80
- | `token` | `string` | Token de licencia de TIA GPC |
81
-
82
- ### Opcionales
83
-
84
- | Prop | Tipo | Default | Descripción |
85
- |------|------|---------|-------------|
86
- | `theme` | `"auto" \| "light" \| "dark"` | `"auto"` | Tema visual del widget |
87
- | `language` | `"auto" \| "es" \| "en" \| "fr"` | `"auto"` | Idioma de la interfaz |
88
- | `position` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` | Posición del widget flotante |
89
- | `autoOpen` | `boolean` | `false` | Abrir automáticamente al cargar |
90
- | `showBranding` | `boolean` | `true` | Mostrar marca "Powered by TIA" |
91
- | `showMetadata` | `boolean` | `false` | Mostrar metadatos de tokens y tiempos de respuesta |
92
- | `mobileFullscreen` | `boolean` | `true` | Mostrar en pantalla completa en móviles |
93
- | `onReady` | `() => void` | - | Callback cuando el widget está listo |
94
- | `onError` | `(error: Error) => void` | - | Callback cuando hay un error |
95
- | `onClose` | `() => void` | - | Callback cuando se cierra el widget |
96
-
97
- ## 📝 Ejemplos
98
-
99
- ### Configuración Completa
180
+ #### Con Configuración Avanzada
100
181
 
101
182
  ```jsx
102
- import { TiaGPCWidget } from 'tia-gpc-widget';
183
+ import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
103
184
  import 'tia-gpc-widget/styles';
104
185
 
105
186
  function App() {
106
187
  const handleReady = () => {
107
- console.log('TIA GPC Widget ready!');
188
+ console.log('✅ Widget inicializado correctamente');
108
189
  };
109
190
 
110
191
  const handleError = (error) => {
111
- console.error('TIA GPC Error:', error);
112
- };
113
-
114
- const handleClose = () => {
115
- console.log('Widget closed');
192
+ console.error('❌ Error en el widget:', error);
116
193
  };
117
194
 
118
195
  return (
119
196
  <TiaGPCWidget
120
- token="tu-token-de-licencia"
121
- theme="light"
122
- language="en"
123
- position="bottom-right"
197
+ token="tu-license-token"
198
+ theme={THEMES.AUTO}
199
+ position={WIDGET_POSITIONS.BOTTOM_RIGHT}
200
+ language={LANGUAGES.ES}
201
+ primaryColor="#10b981"
202
+ width="450px"
203
+ height="650px"
124
204
  autoOpen={false}
125
205
  showBranding={true}
126
- showMetadata={false}
127
206
  mobileFullscreen={true}
128
207
  onReady={handleReady}
129
208
  onError={handleError}
130
- onClose={handleClose}
209
+ onClose={() => console.log('Widget cerrado')}
131
210
  />
132
211
  );
133
212
  }
134
213
  ```
135
214
 
136
- ### Variables de Entorno (Recomendado)
215
+ ---
137
216
 
138
- Crea un archivo `.env` o `.env.local`:
217
+ ### 2. HTML Puro / Vanilla JavaScript
218
+
219
+ #### Método 1: Usando el elemento HTML directamente
220
+
221
+ ```html
222
+ <!DOCTYPE html>
223
+ <html lang="es">
224
+ <head>
225
+ <meta charset="UTF-8">
226
+ <title>TIA GPC Widget - HTML Puro</title>
227
+ <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
228
+ </head>
229
+ <body>
230
+ <h1>Mi Sitio Web</h1>
231
+
232
+ <!-- Widget como elemento HTML -->
233
+ <tia-gpc-widget
234
+ token="tu-license-token"
235
+ theme="light"
236
+ position="bottom-right"
237
+ language="es"
238
+ primary-color="#3b82f6"
239
+ width="400px"
240
+ height="600px"
241
+ auto-open="false"
242
+ show-branding="true"
243
+ ></tia-gpc-widget>
244
+
245
+ <script src="./tia-gpc-widget.standalone.js"></script>
246
+
247
+ <!-- Eventos opcionales -->
248
+ <script>
249
+ const widget = document.querySelector('tia-gpc-widget');
250
+
251
+ widget.addEventListener('ready', () => {
252
+ console.log('Widget listo');
253
+ });
254
+
255
+ widget.addEventListener('error', (e) => {
256
+ console.error('Error:', e.detail);
257
+ });
258
+
259
+ widget.addEventListener('close', () => {
260
+ console.log('Widget cerrado');
261
+ });
262
+ </script>
263
+ </body>
264
+ </html>
265
+ ```
139
266
 
140
- ```env
141
- # Para Vite/React
142
- VITE_TIA_GPC_TOKEN=tu-token-de-licencia
267
+ #### Método 2: Creación programática con JavaScript
268
+
269
+ ```html
270
+ <!DOCTYPE html>
271
+ <html lang="es">
272
+ <head>
273
+ <meta charset="UTF-8">
274
+ <title>TIA GPC Widget - Programático</title>
275
+ <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
276
+ </head>
277
+ <body>
278
+ <h1>Mi Sitio Web</h1>
279
+ <button id="crear-widget">Crear Widget</button>
280
+
281
+ <script src="./tia-gpc-widget.standalone.js"></script>
282
+ <script>
283
+ document.getElementById('crear-widget').addEventListener('click', () => {
284
+ // Usar la API global TiaGPC
285
+ const widget = TiaGPC.create({
286
+ token: 'tu-license-token',
287
+ theme: 'auto',
288
+ position: TiaGPC.POSITIONS.BOTTOM_RIGHT,
289
+ language: TiaGPC.LANGUAGES.ES,
290
+ primaryColor: '#3b82f6',
291
+ autoOpen: false,
292
+ onReady: () => console.log('✅ Widget listo'),
293
+ onError: (error) => console.error('❌ Error:', error),
294
+ onClose: () => console.log('Widget cerrado')
295
+ });
296
+
297
+ console.log('Widget creado:', widget);
298
+ });
299
+
300
+ // Ver información del widget
301
+ TiaGPC.info();
302
+ </script>
303
+ </body>
304
+ </html>
305
+ ```
306
+
307
+ ---
308
+
309
+ ### 3. Angular
143
310
 
144
- # Para Next.js
145
- NEXT_PUBLIC_TIA_GPC_TOKEN=tu-token-de-licencia
311
+ #### Paso 1: Instalar el widget
312
+
313
+ ```bash
314
+ npm install tia-gpc-widget
146
315
  ```
147
316
 
148
- Luego úsala:
317
+ #### Paso 2: Configurar Angular para Web Components
149
318
 
150
- ```jsx
151
- // Vite/React
152
- <TiaGPCWidget token={process.env.VITE_TIA_GPC_TOKEN} />
319
+ En `src/main.ts` o `src/polyfills.ts`, agrega:
153
320
 
154
- // Next.js
155
- <TiaGPCWidget token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN} />
321
+ ```typescript
322
+ // Habilitar Custom Elements (Web Components)
323
+ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
156
324
  ```
157
325
 
158
- ### Uso Condicional
326
+ En tu módulo principal (`app.module.ts`):
159
327
 
160
- ```jsx
161
- import { useState } from 'react';
162
- import { TiaGPCWidget } from 'tia-gpc-widget';
163
- import 'tia-gpc-widget/styles';
328
+ ```typescript
329
+ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
330
+ import { BrowserModule } from '@angular/platform-browser';
331
+ import { AppComponent } from './app.component';
164
332
 
165
- function App() {
166
- const [showChat, setShowChat] = useState(true);
333
+ @NgModule({
334
+ declarations: [AppComponent],
335
+ imports: [BrowserModule],
336
+ schemas: [CUSTOM_ELEMENTS_SCHEMA], // ← Importante
337
+ bootstrap: [AppComponent]
338
+ })
339
+ export class AppModule { }
340
+ ```
167
341
 
168
- return (
169
- <div>
170
- <button onClick={() => setShowChat(!showChat)}>
171
- Toggle Chat
172
- </button>
342
+ #### Paso 3: Importar los archivos del widget
343
+
344
+ En `angular.json`, agrega los archivos CSS y JS:
345
+
346
+ ```json
347
+ {
348
+ "projects": {
349
+ "tu-proyecto": {
350
+ "architect": {
351
+ "build": {
352
+ "options": {
353
+ "styles": [
354
+ "src/styles.css",
355
+ "node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.css"
356
+ ],
357
+ "scripts": [
358
+ "node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"
359
+ ]
360
+ }
361
+ }
362
+ }
363
+ }
364
+ }
365
+ }
366
+ ```
173
367
 
174
- {showChat && <TiaGPCWidget token="tu-token" />}
175
- </div>
176
- );
368
+ #### Paso 4: Usar el widget en tu componente
369
+
370
+ ```typescript
371
+ // app.component.ts
372
+ import { Component, OnInit } from '@angular/core';
373
+
374
+ declare global {
375
+ interface Window {
376
+ TiaGPC: any;
377
+ }
378
+ }
379
+
380
+ @Component({
381
+ selector: 'app-root',
382
+ template: `
383
+ <h1>Mi Aplicación Angular</h1>
384
+
385
+ <!-- Opción 1: Elemento HTML directo -->
386
+ <tia-gpc-widget
387
+ [attr.token]="widgetToken"
388
+ [attr.theme]="theme"
389
+ [attr.position]="position"
390
+ [attr.language]="language"
391
+ (ready)="onWidgetReady()"
392
+ (error)="onWidgetError($event)"
393
+ ></tia-gpc-widget>
394
+ `
395
+ })
396
+ export class AppComponent implements OnInit {
397
+ widgetToken = 'tu-license-token';
398
+ theme = 'auto';
399
+ position = 'bottom-right';
400
+ language = 'es';
401
+
402
+ ngOnInit() {
403
+ console.log('TiaGPC disponible:', window.TiaGPC);
404
+ }
405
+
406
+ onWidgetReady() {
407
+ console.log('✅ Widget de TIA GPC listo');
408
+ }
409
+
410
+ onWidgetError(event: any) {
411
+ console.error('❌ Error en widget:', event.detail);
412
+ }
177
413
  }
178
414
  ```
179
415
 
180
- ## 🌍 Idiomas Soportados
416
+ #### Opción alternativa: Creación programática
417
+
418
+ ```typescript
419
+ // app.component.ts
420
+ import { Component, OnInit } from '@angular/core';
421
+
422
+ @Component({
423
+ selector: 'app-root',
424
+ template: `
425
+ <h1>Mi Aplicación Angular</h1>
426
+ <button (click)="createWidget()">Crear Widget</button>
427
+ <div #widgetContainer></div>
428
+ `
429
+ })
430
+ export class AppComponent implements OnInit {
431
+ ngOnInit() {
432
+ this.createWidget();
433
+ }
434
+
435
+ createWidget() {
436
+ if (window.TiaGPC) {
437
+ window.TiaGPC.create({
438
+ token: 'tu-license-token',
439
+ theme: 'auto',
440
+ language: 'es',
441
+ onReady: () => console.log('Widget listo'),
442
+ onError: (err: any) => console.error(err)
443
+ });
444
+ }
445
+ }
446
+ }
447
+ ```
181
448
 
182
- - 🇪🇸 Español (`es`)
183
- - 🇬🇧 English (`en`)
184
- - 🇫🇷 Français (`fr`)
449
+ ---
185
450
 
186
- El widget detecta automáticamente el idioma del navegador cuando `language="auto"`.
451
+ ### 4. ASP.NET / ASPX
452
+
453
+ #### Opción 1: En una página ASPX
454
+
455
+ ```aspx
456
+ <%@ Page Language="C#" AutoEventWireup="true" %>
457
+
458
+ <!DOCTYPE html>
459
+ <html>
460
+ <head>
461
+ <title>TIA GPC Widget - ASP.NET</title>
462
+ <link rel="stylesheet" href="/assets/tia-gpc-widget.standalone.css" />
463
+ </head>
464
+ <body>
465
+ <form id="form1" runat="server">
466
+ <h1>Mi Aplicación ASP.NET</h1>
467
+
468
+ <!-- Widget TIA GPC -->
469
+ <tia-gpc-widget
470
+ token="<%= ConfigurationManager.AppSettings["TiaGpcToken"] %>"
471
+ theme="auto"
472
+ position="bottom-right"
473
+ language="es"
474
+ primary-color="#2563eb"
475
+ ></tia-gpc-widget>
476
+ </form>
477
+
478
+ <script src="/assets/tia-gpc-widget.standalone.js"></script>
479
+ <script>
480
+ // Eventos opcionales
481
+ document.querySelector('tia-gpc-widget').addEventListener('ready', function() {
482
+ console.log('Widget TIA GPC inicializado');
483
+ });
484
+ </script>
485
+ </body>
486
+ </html>
487
+ ```
187
488
 
188
- ## 🎨 Temas
489
+ #### Opción 2: Con Master Page
189
490
 
190
- - **`auto`**: Detecta el tema del sistema operativo del usuario
191
- - **`light`**: Tema claro
192
- - **`dark`**: Tema oscuro
491
+ En tu `Site.Master`:
193
492
 
194
- ## 🛡️ Seguridad (Turnstile)
493
+ ```aspx
494
+ <head runat="server">
495
+ <link rel="stylesheet" href="/Scripts/tia-gpc-widget.standalone.css" />
496
+ </head>
497
+ <body>
498
+ <asp:ContentPlaceHolder ID="MainContent" runat="server">
499
+ </asp:ContentPlaceHolder>
195
500
 
196
- TIA GPC utiliza [Cloudflare Turnstile](https://www.cloudflare.com/products/turnstile/) para protección anti-bot.
501
+ <!-- Widget global -->
502
+ <tia-gpc-widget
503
+ token="<%= GetTiaGpcToken() %>"
504
+ theme="auto"
505
+ language="es"
506
+ ></tia-gpc-widget>
197
507
 
198
- ✅ **Ya configurado** - La librería viene con Turnstile preconfigurado. No necesitas hacer nada adicional.
508
+ <script src="/Scripts/tia-gpc-widget.standalone.js"></script>
509
+ </body>
510
+ ```
199
511
 
200
- ## 📦 Dependencias
512
+ En tu `Site.Master.cs`:
201
513
 
202
- ### Peer Dependencies (debes instalarlas en tu proyecto)
514
+ ```csharp
515
+ public partial class SiteMaster : MasterPage
516
+ {
517
+ protected string GetTiaGpcToken()
518
+ {
519
+ return ConfigurationManager.AppSettings["TiaGpcToken"];
520
+ }
521
+ }
522
+ ```
523
+
524
+ #### Opción 3: MVC / Razor
525
+
526
+ En tu layout `_Layout.cshtml`:
527
+
528
+ ```html
529
+ <!DOCTYPE html>
530
+ <html>
531
+ <head>
532
+ <link rel="stylesheet" href="~/Content/tia-gpc-widget.standalone.css" />
533
+ </head>
534
+ <body>
535
+ @RenderBody()
536
+
537
+ <!-- Widget TIA GPC -->
538
+ <tia-gpc-widget
539
+ token="@ViewBag.TiaGpcToken"
540
+ theme="auto"
541
+ language="es"
542
+ ></tia-gpc-widget>
543
+
544
+ <script src="~/Scripts/tia-gpc-widget.standalone.js"></script>
545
+ </body>
546
+ </html>
547
+ ```
548
+
549
+ En tu `Controller`:
550
+
551
+ ```csharp
552
+ public class HomeController : Controller
553
+ {
554
+ public ActionResult Index()
555
+ {
556
+ ViewBag.TiaGpcToken = ConfigurationManager.AppSettings["TiaGpcToken"];
557
+ return View();
558
+ }
559
+ }
560
+ ```
561
+
562
+ ---
563
+
564
+ ### 5. Vue.js
565
+
566
+ #### Instalación
203
567
 
204
568
  ```bash
205
- npm install react react-dom
569
+ npm install tia-gpc-widget
206
570
  ```
207
571
 
208
- Versiones soportadas:
209
- - `react`: ^18.0.0
210
- - `react-dom`: ^18.0.0
572
+ #### Configuración
573
+
574
+ En `main.js` o `main.ts`:
211
575
 
212
- ### Dependencies Incluidas
576
+ ```javascript
577
+ import { createApp } from 'vue';
578
+ import App from './App.vue';
213
579
 
214
- El paquete incluye automáticamente:
215
- - `@marsidev/react-turnstile` - Integración de Cloudflare Turnstile
216
- - `axios` - Cliente HTTP
217
- - `i18next` - Internacionalización
218
- - `react-i18next` - i18n para React
219
- - `i18next-browser-languagedetector` - Detección automática de idioma
220
- - `lucide-react` - Iconos
221
- - `react-hot-toast` - Notificaciones toast
580
+ // Importar el widget standalone
581
+ import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.js';
582
+ import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.css';
222
583
 
223
- ## 🎯 Exports Disponibles
584
+ const app = createApp(App);
585
+
586
+ // Configurar Vue para ignorar custom elements
587
+ app.config.compilerOptions.isCustomElement = (tag) => tag === 'tia-gpc-widget';
588
+
589
+ app.mount('#app');
590
+ ```
591
+
592
+ #### Uso en componentes
593
+
594
+ ```vue
595
+ <template>
596
+ <div>
597
+ <h1>Mi Aplicación Vue</h1>
598
+
599
+ <!-- Widget TIA GPC -->
600
+ <tia-gpc-widget
601
+ :token="widgetToken"
602
+ :theme="theme"
603
+ :language="language"
604
+ position="bottom-right"
605
+ @ready="onReady"
606
+ @error="onError"
607
+ ></tia-gpc-widget>
608
+ </div>
609
+ </template>
610
+
611
+ <script setup>
612
+ import { ref, onMounted } from 'vue';
613
+
614
+ const widgetToken = ref('tu-license-token');
615
+ const theme = ref('auto');
616
+ const language = ref('es');
617
+
618
+ const onReady = () => {
619
+ console.log('✅ Widget TIA GPC listo');
620
+ };
621
+
622
+ const onError = (event) => {
623
+ console.error('❌ Error:', event.detail);
624
+ };
625
+
626
+ onMounted(() => {
627
+ console.log('TiaGPC disponible:', window.TiaGPC);
628
+ });
629
+ </script>
630
+ ```
631
+
632
+ ---
633
+
634
+ ### 6. Next.js
635
+
636
+ #### Instalación
637
+
638
+ ```bash
639
+ npm install tia-gpc-widget
640
+ ```
641
+
642
+ #### Uso (con Client Component)
224
643
 
225
644
  ```jsx
226
- // Componente principal
227
- import { TiaGPCWidget } from 'tia-gpc-widget';
645
+ // components/TiaWidget.jsx
646
+ 'use client'; // ← Importante: Client Component
228
647
 
229
- // Constantes útiles
230
- import { WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
648
+ import { useEffect } from 'react';
231
649
 
232
- // Servicio para uso avanzado (opcional)
233
- import { GPCService, getGPCService } from 'tia-gpc-widget';
650
+ export default function TiaWidget() {
651
+ useEffect(() => {
652
+ // Importar el widget solo en el cliente
653
+ import('tia-gpc-widget/dist/tia-gpc-widget.standalone.js');
654
+ }, []);
234
655
 
235
- // Estilos
236
- import 'tia-gpc-widget/styles';
656
+ return (
657
+ <>
658
+ {/* CSS */}
659
+ <link rel="stylesheet" href="/tia-gpc-widget.standalone.css" />
660
+
661
+ {/* Widget */}
662
+ <tia-gpc-widget
663
+ token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN}
664
+ theme="auto"
665
+ language="es"
666
+ ></tia-gpc-widget>
667
+ </>
668
+ );
669
+ }
237
670
  ```
238
671
 
239
- ### Uso de Constantes
672
+ En tu página:
240
673
 
241
674
  ```jsx
242
- import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
675
+ // app/page.jsx
676
+ import TiaWidget from '@/components/TiaWidget';
677
+
678
+ export default function Home() {
679
+ return (
680
+ <main>
681
+ <h1>Mi App Next.js</h1>
682
+ <TiaWidget />
683
+ </main>
684
+ );
685
+ }
686
+ ```
243
687
 
244
- <TiaGPCWidget
245
- token="tu-token"
246
- position={WIDGET_POSITIONS.BOTTOM_LEFT}
247
- theme={THEMES.DARK}
248
- language={LANGUAGES.ENGLISH,}
249
- />
688
+ ---
689
+
690
+ ### 7. PHP
691
+
692
+ ```php
693
+ <!DOCTYPE html>
694
+ <html lang="es">
695
+ <head>
696
+ <meta charset="UTF-8">
697
+ <title>TIA GPC Widget - PHP</title>
698
+ <link rel="stylesheet" href="/assets/tia-gpc-widget.standalone.css">
699
+ </head>
700
+ <body>
701
+ <h1>Mi Aplicación PHP</h1>
702
+
703
+ <?php
704
+ // Obtener token desde variables de entorno o config
705
+ $tiaGpcToken = getenv('TIA_GPC_TOKEN') ?: 'tu-license-token';
706
+ $userLanguage = $_SESSION['user_language'] ?? 'es';
707
+ ?>
708
+
709
+ <!-- Widget TIA GPC -->
710
+ <tia-gpc-widget
711
+ token="<?php echo htmlspecialchars($tiaGpcToken); ?>"
712
+ theme="auto"
713
+ position="bottom-right"
714
+ language="<?php echo htmlspecialchars($userLanguage); ?>"
715
+ ></tia-gpc-widget>
716
+
717
+ <script src="/assets/tia-gpc-widget.standalone.js"></script>
718
+ </body>
719
+ </html>
250
720
  ```
251
721
 
252
- ## 🔧 Troubleshooting
722
+ ---
253
723
 
254
- ### El widget no se muestra
724
+ ## 🎛️ API y Configuración
725
+
726
+ ### Props/Atributos
727
+
728
+ Todos los frameworks soportan los mismos atributos:
729
+
730
+ | Atributo | Tipo | Por Defecto | Descripción |
731
+ |----------|------|-------------|-------------|
732
+ | `token` | `string` | **Requerido** | Token de licencia de TIA GPC |
733
+ | `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Tema del widget |
734
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Posición en la pantalla |
735
+ | `language` | `'es' \| 'en' \| 'fr'` | `'es'` | Idioma del widget |
736
+ | `primary-color` | `string` | `'#2563eb'` | Color primario (hexadecimal) |
737
+ | `width` | `string` | `'400px'` | Ancho del widget |
738
+ | `height` | `string` | `'600px'` | Alto del widget |
739
+ | `api-url` | `string` | API por defecto | URL de la API personalizada |
740
+ | `turnstile-site-key` | `string` | - | Clave del sitio Cloudflare Turnstile |
741
+ | `auto-open` | `boolean` | `false` | Abrir automáticamente al cargar |
742
+ | `show-branding` | `boolean` | `true` | Mostrar marca de TIA GPC |
743
+ | `mobile-fullscreen` | `boolean` | `true` | Pantalla completa en móviles |
744
+
745
+ ### Eventos
746
+
747
+ | Evento | Descripción | Payload |
748
+ |--------|-------------|---------|
749
+ | `ready` | Se dispara cuando el widget está listo | - |
750
+ | `error` | Se dispara cuando ocurre un error | `{ detail: ErrorObject }` |
751
+ | `close` | Se dispara cuando el widget se cierra | - |
752
+
753
+ #### Ejemplo de uso de eventos
754
+
755
+ ```html
756
+ <script>
757
+ const widget = document.querySelector('tia-gpc-widget');
758
+
759
+ widget.addEventListener('ready', () => {
760
+ console.log('Widget listo');
761
+ });
762
+
763
+ widget.addEventListener('error', (e) => {
764
+ console.error('Error:', e.detail);
765
+ // Enviar a sistema de logging
766
+ });
767
+
768
+ widget.addEventListener('close', () => {
769
+ console.log('Usuario cerró el widget');
770
+ // Analytics o tracking
771
+ });
772
+ </script>
773
+ ```
255
774
 
256
- 1. Verifica que importaste los estilos:
257
- ```jsx
258
- import 'tia-gpc-widget/styles';
259
- ```
775
+ ### API Programática (JavaScript)
260
776
 
261
- 2. Asegúrate que React y ReactDOM estén instalados:
262
- ```bash
263
- npm install react react-dom
264
- ```
777
+ El widget expone una API global `TiaGPC` para control programático:
265
778
 
266
- ### Errores de Conexión
779
+ ```javascript
780
+ // Crear widget programáticamente
781
+ const widget = TiaGPC.create({
782
+ token: 'tu-token',
783
+ theme: 'dark',
784
+ language: 'en',
785
+ position: TiaGPC.POSITIONS.BOTTOM_LEFT,
786
+ onReady: () => console.log('Listo'),
787
+ onError: (err) => console.error(err)
788
+ });
267
789
 
268
- Si ves errores de conexión al backend:
269
- - Verifica que tu `token` de licencia sea válido
270
- - Asegúrate de tener conexión a internet
271
- - Contacta a soporte si el problema persiste
790
+ // Abrir el widget
791
+ widget.open();
272
792
 
273
- ## 🏗️ Desarrollo Local
793
+ // Cerrar el widget
794
+ widget.close();
274
795
 
275
- ### Clonar el repositorio
796
+ // Ver información
797
+ TiaGPC.info();
276
798
 
277
- ```bash
278
- git clone https://gitlab.com/softia/tiagpc-frontend.git
279
- cd tiagpc-frontend
799
+ // Constantes disponibles
800
+ console.log(TiaGPC.POSITIONS); // { BOTTOM_RIGHT, BOTTOM_LEFT, ... }
801
+ console.log(TiaGPC.THEMES); // { AUTO, LIGHT, DARK }
802
+ console.log(TiaGPC.LANGUAGES); // { ES, EN, FR }
280
803
  ```
281
804
 
282
- ### Instalar dependencias
805
+ ---
283
806
 
284
- ```bash
285
- npm install
807
+ ## 🎨 Personalización
808
+
809
+ ### Temas
810
+
811
+ ```html
812
+ <!-- Automático (sigue preferencias del sistema) -->
813
+ <tia-gpc-widget theme="auto"></tia-gpc-widget>
814
+
815
+ <!-- Claro -->
816
+ <tia-gpc-widget theme="light"></tia-gpc-widget>
817
+
818
+ <!-- Oscuro -->
819
+ <tia-gpc-widget theme="dark"></tia-gpc-widget>
820
+ ```
821
+
822
+ ### Posiciones
823
+
824
+ ```html
825
+ <!-- Esquina inferior derecha (por defecto) -->
826
+ <tia-gpc-widget position="bottom-right"></tia-gpc-widget>
827
+
828
+ <!-- Esquina inferior izquierda -->
829
+ <tia-gpc-widget position="bottom-left"></tia-gpc-widget>
830
+
831
+ <!-- Esquina superior derecha -->
832
+ <tia-gpc-widget position="top-right"></tia-gpc-widget>
833
+
834
+ <!-- Esquina superior izquierda -->
835
+ <tia-gpc-widget position="top-left"></tia-gpc-widget>
286
836
  ```
287
837
 
288
- ### Configurar variables de entorno
838
+ ### Idiomas
289
839
 
290
- Crea un archivo `.env` (valores de desarrollo):
840
+ ```html
841
+ <!-- Español -->
842
+ <tia-gpc-widget language="es"></tia-gpc-widget>
291
843
 
292
- ```env
293
- VITE_API_URL=http://localhost:8002
294
- VITE_TURNSTILE_SITE_KEY=0x4AAAAAAB9XB2TsB-P7vbJM
295
- VITE_ENV=development
296
- VITE_DEBUG=true
844
+ <!-- Inglés -->
845
+ <tia-gpc-widget language="en"></tia-gpc-widget>
846
+
847
+ <!-- Francés -->
848
+ <tia-gpc-widget language="fr"></tia-gpc-widget>
297
849
  ```
298
850
 
299
- > **Nota:** En producción, la librería usa automáticamente los valores correctos de API y Turnstile configurados internamente.
851
+ ### Colores
852
+
853
+ ```html
854
+ <!-- Color personalizado -->
855
+ <tia-gpc-widget
856
+ primary-color="#10b981"
857
+ ></tia-gpc-widget>
300
858
 
301
- ### Comandos disponibles
859
+ <!-- Azul (por defecto) -->
860
+ <tia-gpc-widget primary-color="#2563eb"></tia-gpc-widget>
861
+
862
+ <!-- Verde -->
863
+ <tia-gpc-widget primary-color="#16a34a"></tia-gpc-widget>
864
+
865
+ <!-- Morado -->
866
+ <tia-gpc-widget primary-color="#9333ea"></tia-gpc-widget>
867
+ ```
868
+
869
+ ---
870
+
871
+ ## 🛠️ Build y Desarrollo
872
+
873
+ ### Scripts disponibles
302
874
 
303
875
  ```bash
304
- # Servidor de desarrollo
876
+ # Desarrollo (modo dev con hot reload)
305
877
  npm run dev
306
878
 
307
- # Build de producción
879
+ # Build completo (NPM + Standalone)
308
880
  npm run build
309
881
 
310
- # Preview del build
311
- npm run preview
882
+ # Build solo para NPM (sin React incluido)
883
+ npm run build:npm
884
+
885
+ # Build Standalone (con React incluido)
886
+ npm run build:standalone
312
887
 
313
- # Linting
888
+ # Lint
314
889
  npm run lint
890
+
891
+ # Preview
892
+ npm run preview
893
+ ```
894
+
895
+ ### Estructura de archivos generados
896
+
897
+ ```
898
+ dist/
899
+ ├── tia-gpc.es.js # Build ESM para NPM
900
+ ├── tia-gpc.cjs.js # Build CommonJS para NPM
901
+ ├── tia-gpc.css # CSS para build NPM
902
+ ├── tia-gpc-widget.standalone.js # Build standalone (IIFE con React)
903
+ └── tia-gpc-widget.standalone.css # CSS para standalone
315
904
  ```
316
905
 
317
- ### Build para publicación
906
+ ### ¿Cuál archivo usar?
907
+
908
+ | Entorno | Archivo a usar |
909
+ |---------|----------------|
910
+ | React, Vue (con build system) | `tia-gpc.es.js` + `tia-gpc.css` |
911
+ | Node.js CommonJS | `tia-gpc.cjs.js` + `tia-gpc.css` |
912
+ | HTML puro, Angular, ASP.NET, PHP | `tia-gpc-widget.standalone.js` + `tia-gpc-widget.standalone.css` |
913
+
914
+ ---
915
+
916
+ ## 📤 Publicación
917
+
918
+ ### Publicar en NPM (Público)
318
919
 
319
920
  ```bash
320
- # Crear build de producción
921
+ # 1. Login en NPM
922
+ npm login
923
+
924
+ # 2. Construir el proyecto
321
925
  npm run build
322
926
 
323
- # El build genera:
324
- # - dist/tia-gpc.es.js (ESM)
325
- # - dist/tia-gpc.cjs.js (CommonJS)
326
- # - dist/tia-gpc.css (Estilos)
927
+ # 3. Publicar
928
+ npm publish
929
+ ```
930
+
931
+ ### Publicar en NPM Privado / GitLab Package Registry
932
+
933
+ #### Configurar `.npmrc`
934
+
935
+ Crea un archivo `.npmrc` en la raíz del proyecto:
936
+
937
+ ```ini
938
+ # Para GitLab Package Registry
939
+ @tu-scope:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
940
+ //gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/:_authToken=${CI_JOB_TOKEN}
941
+ ```
942
+
943
+ #### Actualizar `package.json`
944
+
945
+ ```json
946
+ {
947
+ "name": "@tu-scope/tia-gpc-widget",
948
+ "publishConfig": {
949
+ "@tu-scope:registry": "https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/"
950
+ }
951
+ }
327
952
  ```
328
953
 
329
- ## 📤 Publicación en NPM
954
+ #### Publicar
330
955
 
331
956
  ```bash
332
- # 1. Autenticarse en npm
333
- npm login
957
+ npm run build
958
+ npm publish
959
+ ```
960
+
961
+ ### Publicar en CDN
962
+
963
+ 1. Hacer build del proyecto:
964
+ ```bash
965
+ npm run build
966
+ ```
967
+
968
+ 2. Subir archivos al CDN:
969
+ ```
970
+ dist/tia-gpc-widget.standalone.js → https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js
971
+ dist/tia-gpc-widget.standalone.css → https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css
972
+ ```
973
+
974
+ 3. Usuarios pueden incluir directamente:
975
+ ```html
976
+ <script src="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js"></script>
977
+ <link rel="stylesheet" href="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css">
978
+ ```
979
+
980
+ ### Distribución Manual
334
981
 
335
- # 2. Publicar (automáticamente ejecuta build)
336
- npm publish --access public
982
+ Copia los archivos del `dist/` a tu servidor web:
337
983
 
338
- # O para scoped packages
339
- npm publish --access public
984
+ ```bash
985
+ # Copiar archivos standalone al servidor
986
+ cp dist/tia-gpc-widget.standalone.* /var/www/html/assets/
340
987
  ```
341
988
 
342
- El script `prepublishOnly` ejecuta automáticamente el build antes de publicar.
989
+ ---
990
+
991
+ ## 🔐 Obtener Token de Licencia
992
+
993
+ Para usar este widget necesitas un token de licencia de TIA GPC. Contacta con el equipo de TIA para obtener tu token:
994
+
995
+ - **Email**: soporte@tia.com
996
+ - **Web**: https://tia.com/gpc
997
+
998
+ ---
999
+
1000
+ ## 📊 Tamaño de los Bundles
1001
+
1002
+ | Archivo | Tamaño (gzip) | Descripción |
1003
+ |---------|---------------|-------------|
1004
+ | `tia-gpc.es.js` | ~45 KB | Build NPM (sin React) |
1005
+ | `tia-gpc-widget.standalone.js` | ~180 KB | Build standalone (con React) |
1006
+ | `*.css` | ~15 KB | Estilos |
343
1007
 
344
- ## 🌐 Compatibilidad
1008
+ El bundle standalone es más grande porque incluye React y todas las dependencias.
1009
+
1010
+ ---
345
1011
 
346
- ### Frameworks Soportados
1012
+ ## 🐛 Troubleshooting
347
1013
 
348
- - ✅ React 18+
349
- - ✅ Next.js 13+ (App Router y Pages Router)
350
- - ✅ Vite
351
- - ✅ Create React App
352
- - ✅ Remix
353
- - ✅ Gatsby
1014
+ ### El widget no aparece
354
1015
 
355
- ### Navegadores Soportados
1016
+ 1. Verifica que incluiste ambos archivos (JS y CSS)
1017
+ 2. Revisa la consola del navegador para errores
1018
+ 3. Asegúrate de que el token es válido
356
1019
 
357
- - ✅ Chrome/Edge (últimas 2 versiones)
358
- - ✅ Firefox (últimas 2 versiones)
359
- - ✅ Safari 14+
360
- - ✅ Mobile (iOS Safari, Chrome Mobile)
1020
+ ### Error: "customElements.define() called with incorrect arguments"
361
1021
 
362
- ## 📱 Características
1022
+ - En Angular: Agrega `CUSTOM_ELEMENTS_SCHEMA` a tu módulo
1023
+ - En Vue: Configura `isCustomElement` en el compiler options
363
1024
 
364
- - 💬 Chat con IA contextualizada por documentos
365
- - 🛡️ Protección anti-bot con Cloudflare Turnstile
366
- - 🌍 Multiidioma (Español, Inglés, Francés) con detección automática
367
- - 📱 Totalmente responsive y optimizado para móviles
368
- - 🎨 Temas claro/oscuro con detección automática del sistema
369
- - ⚡ Tree-shaking y optimización de bundle
370
- - 🔒 Validación de sesiones con cacheo
371
- - ♿ Accesible (a11y)
372
- - 📊 Metadatos opcionales (tokens, tiempos de respuesta)
1025
+ ### Conflictos de CSS
373
1026
 
374
- ## 📄 Licencia
1027
+ El widget usa prefijos `gpc-` en todas las clases para evitar conflictos. Si aún hay problemas, puedes aumentar la especificidad:
1028
+
1029
+ ```css
1030
+ .tu-contenedor tia-gpc-widget {
1031
+ /* tus estilos personalizados */
1032
+ }
1033
+ ```
1034
+
1035
+ ### React no está definido (en build standalone)
1036
+
1037
+ Si ves este error, asegúrate de estar usando el archivo `standalone.js` y no el build NPM regular.
1038
+
1039
+ ---
1040
+
1041
+ ## 📝 Licencia
1042
+
1043
+ UNLICENSED - Uso interno de TIA
1044
+
1045
+ ---
1046
+
1047
+ ## 👥 Soporte
1048
+
1049
+ Para soporte técnico:
1050
+
1051
+ - **Email**: soporte@tia.com
1052
+ - **GitLab Issues**: https://gitlab.com/softia/tiagpc-frontend/issues
1053
+ - **Documentación**: Este README
1054
+
1055
+ ---
375
1056
 
376
- UNLICENSED - Uso restringido solo para clientes autorizados de TIA GPC.
1057
+ ## 🚀 Changelog
377
1058
 
378
- ## 🆘 Soporte
1059
+ ### v1.0.0 (2025-01-10)
379
1060
 
380
- Para soporte técnico, contacta a:
381
- - 📧 Email: soporte@tiagpc.com
382
- - 🌐 Documentación: https://docs.tiagpc.com
383
- - 🔗 Repository: https://gitlab.com/softia/tiagpc-frontend
1061
+ - ✨ Versión inicial
1062
+ - ✅ Soporte para React
1063
+ - ✅ Build standalone para HTML/Angular/ASP.NET
1064
+ - ✅ Web Component API
1065
+ - ✅ Temas claro/oscuro
1066
+ - ✅ Internacionalización (ES/EN/FR)
1067
+ - ✅ Personalización completa
384
1068
 
385
1069
  ---
386
1070
 
387
- **TIA GPC** - Sistema de atención al cliente con IA para negocios
1071
+ **Desarrollado con ❤️ por el equipo de TIA**