rio-assist-widget 0.1.27 → 0.1.32

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 (15) hide show
  1. package/README.md +62 -62
  2. package/dist/rio-assist.js +164 -104
  3. package/index.html +38 -38
  4. package/package.json +40 -40
  5. package/src/components/conversations-panel/conversations-panel.template.ts +27 -27
  6. package/src/components/fullscreen/fullscreen.styles.ts +75 -65
  7. package/src/components/fullscreen/fullscreen.template.ts +34 -0
  8. package/src/components/mini-panel/mini-panel.styles.ts +52 -51
  9. package/src/components/mini-panel/mini-panel.template.ts +167 -189
  10. package/src/components/rio-assist/rio-assist.styles.ts +101 -92
  11. package/src/components/rio-assist/rio-assist.template.ts +106 -75
  12. package/src/components/rio-assist/rio-assist.ts +375 -348
  13. package/src/main.ts +15 -15
  14. package/src/playground.ts +31 -31
  15. package/src/services/rioWebsocket.ts +142 -142
package/README.md CHANGED
@@ -1,62 +1,62 @@
1
- # Rio Insight Widget
2
-
3
- Widget lateral do Rio Insight embalado como Web Component. Ao receber o token de login do RIO ele abre um websocket direto para `wss://ws.volkswagen.latam-sandbox.rio.cloud?token={TOKEN}` e envia o payload
4
-
5
- ```json
6
- {
7
- "action": "sendMessage",
8
- "message": "<mensagem do usuario>"
9
- }
10
- ```
11
-
12
- ## Scripts
13
- - `npm run dev` - inicia Vite para desenvolvimento.
14
- - `npm run build` - gera `dist/rio-assist.js` pronto para CDN ou npm.
15
- - `npm run preview` - serve o bundle de producao localmente.
16
-
17
- ## Uso rapido no navegador
18
- ```html
19
- <script src="https://cdn.exemplo.com/rio-assist.js"></script>
20
- <script>
21
- window.RioAssist.init({
22
- rioToken: '<TOKEN_RIO>',
23
- title: 'Rio Insight',
24
- buttonLabel: 'Rio Insight',
25
- suggestions: [
26
- 'Resumo da Frota',
27
- 'Frota Disponível',
28
- 'Chamados Abertos',
29
- 'Parados + Causas',
30
- 'Aguardando Peças',
31
- 'Principais Gargalos',
32
- 'Tempo por Concessionária',
33
- 'Tempo de Ciclo',
34
- 'Preventiva x Corretiva',
35
- ],
36
- });
37
- </script>
38
- ```
39
-
40
- O metodo `init` adiciona o elemento `<rio-assist-widget>` ao final do `body`. Todos os parametros sao opcionais, mas `rioToken` precisa ser preenchido para conectar ao websocket.
41
-
42
- ## Integracao com apps (React/Angular/Vanilla)
43
- 1. Instale:
44
- ```bash
45
- npm install rio-assist-widget
46
- ```
47
- 2. Importe o bundle no bootstrap (ex.: `main.tsx`):
48
- ```ts
49
- import 'rio-assist-widget/dist/rio-assist.js';
50
-
51
- window.RioAssist?.init({
52
- rioToken: '<TOKEN_RIO>',
53
- accentColor: '#008B9A',
54
- });
55
- ```
56
- 3. Se preferir instanciar manualmente, coloque `<rio-assist-widget></rio-assist-widget>` no HTML e defina os atributos `data-*` (`data-title`, `data-button-label`, `data-rio-token` etc.).
57
-
58
- ## Eventos disponibilizados
59
- - `rioassist:open` / `rioassist:close` - disparados ao abrir/fechar o painel.
60
- - `rioassist:send` - disparado quando o usuario envia uma mensagem. O `detail` contem `{ message, apiBaseUrl, token }`.
61
-
62
- Escute esses eventos caso queira registrar logs ou interceptar mensagens antes/depois de irem para o websocket.
1
+ # Rio Insight Widget
2
+
3
+ Widget lateral do Rio Insight embalado como Web Component. Ao receber o token de login do RIO ele abre um websocket direto para `wss://ws.volkswagen.latam-sandbox.rio.cloud?token={TOKEN}` e envia o payload
4
+
5
+ ```json
6
+ {
7
+ "action": "sendMessage",
8
+ "message": "<mensagem do usuario>"
9
+ }
10
+ ```
11
+
12
+ ## Scripts
13
+ - `npm run dev` - inicia Vite para desenvolvimento.
14
+ - `npm run build` - gera `dist/rio-assist.js` pronto para CDN ou npm.
15
+ - `npm run preview` - serve o bundle de producao localmente.
16
+
17
+ ## Uso rapido no navegador
18
+ ```html
19
+ <script src="https://cdn.exemplo.com/rio-assist.js"></script>
20
+ <script>
21
+ window.RioAssist.init({
22
+ rioToken: '<TOKEN_RIO>',
23
+ title: 'Rio Insight',
24
+ buttonLabel: 'Rio Insight',
25
+ suggestions: [
26
+ 'Resumo da Frota',
27
+ 'Frota Disponível',
28
+ 'Chamados Abertos',
29
+ 'Parados + Causas',
30
+ 'Aguardando Peças',
31
+ 'Principais Gargalos',
32
+ 'Tempo por Concessionária',
33
+ 'Tempo de Ciclo',
34
+ 'Preventiva x Corretiva',
35
+ ],
36
+ });
37
+ </script>
38
+ ```
39
+
40
+ O metodo `init` adiciona o elemento `<rio-assist-widget>` ao final do `body`. Todos os parametros sao opcionais, mas `rioToken` precisa ser preenchido para conectar ao websocket.
41
+
42
+ ## Integracao com apps (React/Angular/Vanilla)
43
+ 1. Instale:
44
+ ```bash
45
+ npm install rio-assist-widget
46
+ ```
47
+ 2. Importe o bundle no bootstrap (ex.: `main.tsx`):
48
+ ```ts
49
+ import 'rio-assist-widget/dist/rio-assist.js';
50
+
51
+ window.RioAssist?.init({
52
+ rioToken: '<TOKEN_RIO>',
53
+ accentColor: '#008B9A',
54
+ });
55
+ ```
56
+ 3. Se preferir instanciar manualmente, coloque `<rio-assist-widget></rio-assist-widget>` no HTML e defina os atributos `data-*` (`data-title`, `data-button-label`, `data-rio-token` etc.).
57
+
58
+ ## Eventos disponibilizados
59
+ - `rioassist:open` / `rioassist:close` - disparados ao abrir/fechar o painel.
60
+ - `rioassist:send` - disparado quando o usuario envia uma mensagem. O `detail` contem `{ message, apiBaseUrl, token }`.
61
+
62
+ Escute esses eventos caso queira registrar logs ou interceptar mensagens antes/depois de irem para o websocket.