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.
- package/README.md +62 -62
- package/dist/rio-assist.js +164 -104
- package/index.html +38 -38
- package/package.json +40 -40
- package/src/components/conversations-panel/conversations-panel.template.ts +27 -27
- package/src/components/fullscreen/fullscreen.styles.ts +75 -65
- package/src/components/fullscreen/fullscreen.template.ts +34 -0
- package/src/components/mini-panel/mini-panel.styles.ts +52 -51
- package/src/components/mini-panel/mini-panel.template.ts +167 -189
- package/src/components/rio-assist/rio-assist.styles.ts +101 -92
- package/src/components/rio-assist/rio-assist.template.ts +106 -75
- package/src/components/rio-assist/rio-assist.ts +375 -348
- package/src/main.ts +15 -15
- package/src/playground.ts +31 -31
- package/src/services/rioWebsocket.ts +142 -142
|
@@ -1,99 +1,130 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
-
import type { RioAssistWidget } from './rio-assist';
|
|
4
|
-
import { renderFloatingButton } from '../floating-button/floating-button.template';
|
|
5
|
-
import { renderMiniPanel } from '../mini-panel/mini-panel.template';
|
|
6
|
-
import { renderFullscreen } from '../fullscreen/fullscreen.template';
|
|
7
|
-
|
|
8
|
-
export const renderRioAssist = (component: RioAssistWidget) => {
|
|
9
|
-
const canvasClasses = classMap({
|
|
10
|
-
canvas: true,
|
|
11
|
-
'canvas--fullscreen': component.isFullscreen,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
return html`
|
|
15
|
-
<div class=${canvasClasses}>
|
|
16
|
-
${renderFloatingButton(component)}
|
|
17
|
-
${renderMiniPanel(component)}
|
|
18
|
-
${component.isFullscreen ? renderFullscreen(component) : null}
|
|
19
|
-
${component.renameConversationTarget
|
|
20
|
-
? html`
|
|
21
|
-
<div class="dialog-overlay" role="dialog" aria-modal="true">
|
|
22
|
-
<div class="dialog">
|
|
23
|
-
<p class="dialog__message">Digite o novo título para a conversa:</p>
|
|
24
|
-
<input
|
|
25
|
-
class="dialog__input"
|
|
26
|
-
type="text"
|
|
27
|
-
.value=${component.renameConversationTarget.draft}
|
|
28
|
-
@input=${(event: InputEvent) => component.handleRenameDraft(event)}
|
|
29
|
-
aria-label="Novo titulo da conversa"
|
|
30
|
-
/>
|
|
31
|
-
<div class="dialog__actions">
|
|
32
|
-
<button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
|
|
33
|
-
component.cancelRenameConversation()}>
|
|
34
|
-
Cancelar
|
|
35
|
-
</button>
|
|
36
|
-
<button
|
|
37
|
-
type="button"
|
|
38
|
-
class="dialog__button dialog__button--primary"
|
|
39
|
-
@click=${() => component.confirmRenameConversation()}
|
|
40
|
-
>
|
|
41
|
-
Renomear
|
|
42
|
-
</button>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
`
|
|
47
|
-
: null}
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
+
import type { RioAssistWidget } from './rio-assist';
|
|
4
|
+
import { renderFloatingButton } from '../floating-button/floating-button.template';
|
|
5
|
+
import { renderMiniPanel } from '../mini-panel/mini-panel.template';
|
|
6
|
+
import { renderFullscreen } from '../fullscreen/fullscreen.template';
|
|
7
|
+
|
|
8
|
+
export const renderRioAssist = (component: RioAssistWidget) => {
|
|
9
|
+
const canvasClasses = classMap({
|
|
10
|
+
canvas: true,
|
|
11
|
+
'canvas--fullscreen': component.isFullscreen,
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
return html`
|
|
15
|
+
<div class=${canvasClasses}>
|
|
16
|
+
${renderFloatingButton(component)}
|
|
17
|
+
${renderMiniPanel(component)}
|
|
18
|
+
${component.isFullscreen ? renderFullscreen(component) : null}
|
|
19
|
+
${component.renameConversationTarget
|
|
20
|
+
? html`
|
|
21
|
+
<div class="dialog-overlay" role="dialog" aria-modal="true">
|
|
22
|
+
<div class="dialog">
|
|
23
|
+
<p class="dialog__message">Digite o novo título para a conversa:</p>
|
|
24
|
+
<input
|
|
25
|
+
class="dialog__input"
|
|
26
|
+
type="text"
|
|
27
|
+
.value=${component.renameConversationTarget.draft}
|
|
28
|
+
@input=${(event: InputEvent) => component.handleRenameDraft(event)}
|
|
29
|
+
aria-label="Novo titulo da conversa"
|
|
30
|
+
/>
|
|
31
|
+
<div class="dialog__actions">
|
|
32
|
+
<button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
|
|
33
|
+
component.cancelRenameConversation()}>
|
|
34
|
+
Cancelar
|
|
35
|
+
</button>
|
|
36
|
+
<button
|
|
37
|
+
type="button"
|
|
38
|
+
class="dialog__button dialog__button--primary"
|
|
39
|
+
@click=${() => component.confirmRenameConversation()}
|
|
40
|
+
>
|
|
41
|
+
Renomear
|
|
42
|
+
</button>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
`
|
|
47
|
+
: null}
|
|
48
48
|
${component.deleteConversationTarget
|
|
49
49
|
? html`
|
|
50
50
|
<div class="dialog-overlay" role="dialog" aria-modal="true">
|
|
51
51
|
<div class="dialog">
|
|
52
52
|
<p class="dialog__message">Deseja realmente excluir essa conversa?</p>
|
|
53
|
-
<div class="dialog__actions">
|
|
54
|
-
<button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
|
|
55
|
-
component.cancelDeleteConversation()}>
|
|
56
|
-
Cancelar
|
|
57
|
-
</button>
|
|
58
|
-
<button type="button" class="dialog__button dialog__button--danger" @click=${() =>
|
|
59
|
-
component.confirmDeleteConversation()}>
|
|
60
|
-
Excluir
|
|
61
|
-
</button>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
53
|
+
<div class="dialog__actions">
|
|
54
|
+
<button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
|
|
55
|
+
component.cancelDeleteConversation()}>
|
|
56
|
+
Cancelar
|
|
57
|
+
</button>
|
|
58
|
+
<button type="button" class="dialog__button dialog__button--danger" @click=${() =>
|
|
59
|
+
component.confirmDeleteConversation()}>
|
|
60
|
+
Excluir
|
|
61
|
+
</button>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
`
|
|
66
|
+
: null}
|
|
67
|
+
${component.conversationActionError
|
|
68
|
+
? html`
|
|
69
|
+
<div class="dialog-overlay" role="dialog" aria-modal="true">
|
|
70
|
+
<div class="dialog">
|
|
71
|
+
<p class="dialog__message dialog__message--title">
|
|
72
|
+
Erro ao
|
|
73
|
+
${component.conversationActionError.action === 'delete'
|
|
74
|
+
? 'excluir'
|
|
75
|
+
: 'renomear'}
|
|
76
|
+
conversa:
|
|
77
|
+
</p>
|
|
78
|
+
<p class="dialog__message">
|
|
79
|
+
O agente retornou o seguinte erro ao tentar
|
|
80
|
+
${component.conversationActionError.action === 'delete' ? 'excluir' : 'renomear'}
|
|
81
|
+
a conversa:
|
|
82
|
+
</p>
|
|
83
|
+
<p class="dialog__message dialog__message--error">
|
|
84
|
+
${component.conversationActionError.message}
|
|
85
|
+
</p>
|
|
86
|
+
<div class="dialog__actions">
|
|
87
|
+
<button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
|
|
88
|
+
component.cancelConversationActionError()}>
|
|
89
|
+
Cancelar ação
|
|
90
|
+
</button>
|
|
91
|
+
<button
|
|
92
|
+
type="button"
|
|
93
|
+
class="dialog__button dialog__button--primary"
|
|
94
|
+
@click=${() => component.retryConversationAction()}
|
|
95
|
+
>
|
|
96
|
+
Tentar novamente
|
|
97
|
+
</button>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
64
100
|
</div>
|
|
65
101
|
`
|
|
66
102
|
: null}
|
|
67
|
-
${component.
|
|
103
|
+
${component.newConversationConfirmOpen
|
|
68
104
|
? html`
|
|
69
105
|
<div class="dialog-overlay" role="dialog" aria-modal="true">
|
|
70
106
|
<div class="dialog">
|
|
71
107
|
<p class="dialog__message dialog__message--title">
|
|
72
|
-
|
|
73
|
-
${component.conversationActionError.action === 'delete'
|
|
74
|
-
? 'excluir'
|
|
75
|
-
: 'renomear'}
|
|
76
|
-
conversa:
|
|
108
|
+
DESEJA MESMO INICIAR UMA NOVA CONVERSA?
|
|
77
109
|
</p>
|
|
78
110
|
<p class="dialog__message">
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
a conversa:
|
|
82
|
-
</p>
|
|
83
|
-
<p class="dialog__message dialog__message--error">
|
|
84
|
-
${component.conversationActionError.message}
|
|
111
|
+
Não se preocupe: a conversa atual continuará salva e você poderá acessá-la na
|
|
112
|
+
listagem de conversas recentes.
|
|
85
113
|
</p>
|
|
86
114
|
<div class="dialog__actions">
|
|
87
|
-
<button
|
|
88
|
-
|
|
89
|
-
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
class="dialog__button dialog__button--ghost"
|
|
118
|
+
@click=${() => component.cancelCreateConversation()}
|
|
119
|
+
>
|
|
120
|
+
CONTINUAR CONVERSA ATUAL
|
|
90
121
|
</button>
|
|
91
122
|
<button
|
|
92
123
|
type="button"
|
|
93
124
|
class="dialog__button dialog__button--primary"
|
|
94
|
-
@click=${() => component.
|
|
125
|
+
@click=${() => component.confirmCreateConversation()}
|
|
95
126
|
>
|
|
96
|
-
|
|
127
|
+
INICIAR NOVA CONVERSA
|
|
97
128
|
</button>
|
|
98
129
|
</div>
|
|
99
130
|
</div>
|