tia-gpc-widget 1.0.0 → 1.0.1
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.
- package/README.md +18 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,13 +5,13 @@ Librería React para integrar TIA GPC - Sistema de atención al cliente con IA.
|
|
|
5
5
|
## 📦 Instalación
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install
|
|
8
|
+
npm install tia-gpc-widget
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
o con yarn:
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
|
-
yarn add
|
|
14
|
+
yarn add tia-gpc-widget
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## 🚀 Uso Básico
|
|
@@ -19,8 +19,8 @@ yarn add @tia/gpc-widget
|
|
|
19
19
|
### React / Vite
|
|
20
20
|
|
|
21
21
|
```jsx
|
|
22
|
-
import { TiaGPCWidget } from '
|
|
23
|
-
import '
|
|
22
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
23
|
+
import 'tia-gpc-widget/styles';
|
|
24
24
|
|
|
25
25
|
function App() {
|
|
26
26
|
return (
|
|
@@ -37,8 +37,8 @@ export default App;
|
|
|
37
37
|
|
|
38
38
|
```jsx
|
|
39
39
|
// app/layout.js
|
|
40
|
-
import { TiaGPCWidget } from '
|
|
41
|
-
import '
|
|
40
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
41
|
+
import 'tia-gpc-widget/styles';
|
|
42
42
|
|
|
43
43
|
export default function RootLayout({ children }) {
|
|
44
44
|
return (
|
|
@@ -56,8 +56,8 @@ export default function RootLayout({ children }) {
|
|
|
56
56
|
|
|
57
57
|
```jsx
|
|
58
58
|
// pages/_app.js
|
|
59
|
-
import { TiaGPCWidget } from '
|
|
60
|
-
import '
|
|
59
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
60
|
+
import 'tia-gpc-widget/styles';
|
|
61
61
|
|
|
62
62
|
function MyApp({ Component, pageProps }) {
|
|
63
63
|
return (
|
|
@@ -99,8 +99,8 @@ export default MyApp;
|
|
|
99
99
|
### Configuración Completa
|
|
100
100
|
|
|
101
101
|
```jsx
|
|
102
|
-
import { TiaGPCWidget } from '
|
|
103
|
-
import '
|
|
102
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
103
|
+
import 'tia-gpc-widget/styles';
|
|
104
104
|
|
|
105
105
|
function App() {
|
|
106
106
|
const handleReady = () => {
|
|
@@ -159,8 +159,8 @@ Luego úsala:
|
|
|
159
159
|
|
|
160
160
|
```jsx
|
|
161
161
|
import { useState } from 'react';
|
|
162
|
-
import { TiaGPCWidget } from '
|
|
163
|
-
import '
|
|
162
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
163
|
+
import 'tia-gpc-widget/styles';
|
|
164
164
|
|
|
165
165
|
function App() {
|
|
166
166
|
const [showChat, setShowChat] = useState(true);
|
|
@@ -224,22 +224,22 @@ El paquete incluye automáticamente:
|
|
|
224
224
|
|
|
225
225
|
```jsx
|
|
226
226
|
// Componente principal
|
|
227
|
-
import { TiaGPCWidget } from '
|
|
227
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
228
228
|
|
|
229
229
|
// Constantes útiles
|
|
230
|
-
import { WIDGET_POSITIONS, THEMES, LANGUAGES } from '
|
|
230
|
+
import { WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
|
|
231
231
|
|
|
232
232
|
// Servicio para uso avanzado (opcional)
|
|
233
|
-
import { GPCService, getGPCService } from '
|
|
233
|
+
import { GPCService, getGPCService } from 'tia-gpc-widget';
|
|
234
234
|
|
|
235
235
|
// Estilos
|
|
236
|
-
import '
|
|
236
|
+
import 'tia-gpc-widget/styles';
|
|
237
237
|
```
|
|
238
238
|
|
|
239
239
|
### Uso de Constantes
|
|
240
240
|
|
|
241
241
|
```jsx
|
|
242
|
-
import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from '
|
|
242
|
+
import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
|
|
243
243
|
|
|
244
244
|
<TiaGPCWidget
|
|
245
245
|
token="tu-token"
|
|
@@ -255,7 +255,7 @@ import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from '@tia/gpc-widg
|
|
|
255
255
|
|
|
256
256
|
1. Verifica que importaste los estilos:
|
|
257
257
|
```jsx
|
|
258
|
-
import '
|
|
258
|
+
import 'tia-gpc-widget/styles';
|
|
259
259
|
```
|
|
260
260
|
|
|
261
261
|
2. Asegúrate que React y ReactDOM estén instalados:
|