rio-assist-widget 0.1.60 → 0.2.2
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 +50 -4
- package/dist/rio-assist.js +413 -144
- package/package.json +1 -2
- package/src/assets/icons/cancelVoice.png +0 -0
- package/src/assets/icons/confirmVoice.png +0 -0
- package/src/assets/icons/copyText.png +0 -0
- package/src/assets/icons/like.png +0 -0
- package/src/assets/icons/lineThreeDots.png +0 -0
- package/src/assets/icons/share.png +0 -0
- package/src/assets/icons/unlike.png +0 -0
- package/src/assets/icons/update.png +0 -0
- package/src/components/floating-button/floating-button.template.ts +13 -6
- package/src/components/fullscreen/fullscreen.template.ts +1 -1
- package/src/components/mini-panel/mini-panel.styles.ts +153 -27
- package/src/components/mini-panel/mini-panel.template.ts +245 -79
- package/src/components/rio-assist/rio-assist.template.ts +33 -6
- package/src/components/rio-assist/rio-assist.ts +852 -122
- package/src/consultant-agent/consultant-agent.template.ts +12 -7
- package/src/main.ts +52 -27
package/README.md
CHANGED
|
@@ -37,10 +37,56 @@ Widget lateral do UptAIme Assist embalado como Web Component. Ao receber o token
|
|
|
37
37
|
</script>
|
|
38
38
|
```
|
|
39
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
|
-
##
|
|
43
|
-
|
|
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
|
+
## Parametrizacoes por projeto
|
|
43
|
+
Se nenhum parametro abaixo for informado, o widget mantem o comportamento e os visuais atuais como padrao.
|
|
44
|
+
|
|
45
|
+
- `floatingButtonIconUrl`: icone principal do botao flutuante.
|
|
46
|
+
- `floatingButtonLabelIconUrl`: imagem/label do botao flutuante.
|
|
47
|
+
- `floatingButtonBackgroundIconUrl`: imagem de fundo do botao flutuante.
|
|
48
|
+
- `title`: titulo exibido no mini painel e no modo tela cheia.
|
|
49
|
+
- `consultantAgentButtonText`: texto do botao "Consulte o UptAIme Agent".
|
|
50
|
+
- `showConsultantAgentButton`: controla se o botao "Consulte o UptAIme Agent" sera exibido (`true` ou `false`).
|
|
51
|
+
- `consultantAgentInitialMessage`: primeira mensagem enviada ao iniciar o fluxo do agente.
|
|
52
|
+
- `autoStartConsultantFlow`: quando `true`, ao abrir pelo botao flutuante o mini painel ja inicia o fluxo do agente consultor. Nesse modo, o botao de `+` reinicia esse mesmo fluxo, sem abrir a confirmacao de "nova conversa".
|
|
53
|
+
|
|
54
|
+
Exemplo:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<script>
|
|
58
|
+
window.RioAssist.init({
|
|
59
|
+
rioToken: '<TOKEN_RIO>',
|
|
60
|
+
title: 'Meu Assistente',
|
|
61
|
+
floatingButtonIconUrl: 'https://cdn.exemplo.com/icones/projeto-a/icon.png',
|
|
62
|
+
floatingButtonLabelIconUrl: 'https://cdn.exemplo.com/icones/projeto-a/label.png',
|
|
63
|
+
floatingButtonBackgroundIconUrl: 'https://cdn.exemplo.com/icones/projeto-a/bg.png',
|
|
64
|
+
consultantAgentButtonText: 'Falar com especialista',
|
|
65
|
+
showConsultantAgentButton: true,
|
|
66
|
+
consultantAgentInitialMessage:
|
|
67
|
+
'Sou o agente especialista deste projeto. Vou iniciar com um resumo da sua operacao.',
|
|
68
|
+
autoStartConsultantFlow: true,
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Tambem e possivel configurar via atributos `data-*` no elemento:
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<rio-assist-widget
|
|
77
|
+
data-title="Meu Assistente"
|
|
78
|
+
data-consultant-agent-button-text="Falar com especialista"
|
|
79
|
+
data-show-consultant-agent-button="true"
|
|
80
|
+
data-consultant-agent-initial-message="Sou o agente especialista deste projeto. Vou iniciar com um resumo da sua operacao."
|
|
81
|
+
data-floating-button-icon-url="https://cdn.exemplo.com/icones/projeto-a/icon.png"
|
|
82
|
+
data-floating-button-label-icon-url="https://cdn.exemplo.com/icones/projeto-a/label.png"
|
|
83
|
+
data-floating-button-background-icon-url="https://cdn.exemplo.com/icones/projeto-a/bg.png"
|
|
84
|
+
data-auto-start-consultant-flow="true"
|
|
85
|
+
></rio-assist-widget>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Integracao com apps (React/Angular/Vanilla)
|
|
89
|
+
1. Instale:
|
|
44
90
|
```bash
|
|
45
91
|
npm install rio-assist-widget
|
|
46
92
|
```
|