rio-assist-widget 0.1.1 → 0.1.4
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 +5 -5
- package/dist/rio-assist.js +186 -60
- package/index.html +5 -4
- package/package.json +3 -3
- package/src/components/conversations-panel/conversations-panel.styles.ts +52 -1
- package/src/components/conversations-panel/conversations-panel.template.ts +34 -0
- package/src/components/fullscreen/fullscreen.styles.ts +32 -1
- package/src/components/fullscreen/fullscreen.template.ts +25 -1
- package/src/components/mini-panel/mini-panel.styles.ts +8 -4
- package/src/components/mini-panel/mini-panel.template.ts +2 -2
- package/src/components/rio-assist/rio-assist.ts +502 -381
- package/src/main.ts +72 -70
- package/src/playground.ts +22 -21
- package/src/services/rioWebsocket.ts +167 -167
package/index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>
|
|
6
|
+
<title>Rio Insight Widget</title>
|
|
7
7
|
<style>
|
|
8
8
|
body {
|
|
9
9
|
min-height: 100vh;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
|
27
27
|
<main>
|
|
28
|
-
<h1>
|
|
28
|
+
<h1>Rio Insight Widget</h1>
|
|
29
29
|
<p>
|
|
30
30
|
Playground de teste para o webcomponent. Clique no
|
|
31
31
|
botão flutuante no canto inferior direito para testar.
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
</main>
|
|
34
34
|
|
|
35
35
|
<rio-assist-widget
|
|
36
|
-
data-title="
|
|
37
|
-
data-button-label="
|
|
36
|
+
data-title="Rio Insight"
|
|
37
|
+
data-button-label="Rio Insight"
|
|
38
38
|
data-placeholder="Pergunte alguma coisa"
|
|
39
39
|
data-suggestions="Veículos com problemas|Valor das peças|Planos de manutenção"
|
|
40
40
|
data-accent-color="#c02267"
|
|
@@ -44,3 +44,4 @@
|
|
|
44
44
|
<script type="module" src="/src/playground.ts"></script>
|
|
45
45
|
</body>
|
|
46
46
|
</html>
|
|
47
|
+
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rio-assist-widget",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Web Component do painel lateral
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "vite",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"keywords": [
|
|
12
12
|
"web component",
|
|
13
13
|
"widget",
|
|
14
|
-
"rio
|
|
14
|
+
"rio insight",
|
|
15
15
|
"ai agent"
|
|
16
16
|
],
|
|
17
17
|
"author": "",
|
|
@@ -134,7 +134,7 @@ export const conversationsPanelStyles = css`
|
|
|
134
134
|
position: absolute;
|
|
135
135
|
top: 8px;
|
|
136
136
|
right: 6px;
|
|
137
|
-
width:
|
|
137
|
+
width: 8px;
|
|
138
138
|
height: calc(100% - 8px);
|
|
139
139
|
border-radius: 999px;
|
|
140
140
|
background: rgba(125, 143, 162, 0.15);
|
|
@@ -145,6 +145,7 @@ export const conversationsPanelStyles = css`
|
|
|
145
145
|
|
|
146
146
|
.conversation-scrollbar--visible {
|
|
147
147
|
opacity: 1;
|
|
148
|
+
pointer-events: auto;
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
.conversation-list-wrapper--sidebar:hover .conversation-scrollbar {
|
|
@@ -158,6 +159,7 @@ export const conversationsPanelStyles = css`
|
|
|
158
159
|
background: #7d8fa2;
|
|
159
160
|
min-height: 12px;
|
|
160
161
|
display: block;
|
|
162
|
+
cursor: pointer;
|
|
161
163
|
}
|
|
162
164
|
|
|
163
165
|
.conversation-item {
|
|
@@ -240,4 +242,53 @@ export const conversationsPanelStyles = css`
|
|
|
240
242
|
width: 16px;
|
|
241
243
|
height: 16px;
|
|
242
244
|
}
|
|
245
|
+
|
|
246
|
+
.new-conversation-cta {
|
|
247
|
+
overflow: hidden;
|
|
248
|
+
max-height: 0;
|
|
249
|
+
opacity: 0;
|
|
250
|
+
transform: translateY(-8px);
|
|
251
|
+
transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
|
|
252
|
+
padding: 0 16px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.new-conversation-cta.open {
|
|
256
|
+
max-height: 96px;
|
|
257
|
+
opacity: 1;
|
|
258
|
+
transform: translateY(0);
|
|
259
|
+
margin-bottom: 4px;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.new-conversation-cta__button {
|
|
263
|
+
width: 100%;
|
|
264
|
+
height: 44px;
|
|
265
|
+
border-radius: 10px;
|
|
266
|
+
border: 1px solid #30b4c0;
|
|
267
|
+
background: #fff;
|
|
268
|
+
color: #008b9a;
|
|
269
|
+
font-family: 'Source Sans Pro', 'Inter', sans-serif;
|
|
270
|
+
font-size: 15px;
|
|
271
|
+
font-weight: 600;
|
|
272
|
+
display: inline-flex;
|
|
273
|
+
align-items: center;
|
|
274
|
+
justify-content: center;
|
|
275
|
+
gap: 10px;
|
|
276
|
+
padding: 10px 14px;
|
|
277
|
+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
|
|
278
|
+
cursor: pointer;
|
|
279
|
+
transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.new-conversation-cta__button img {
|
|
283
|
+
width: 18px;
|
|
284
|
+
height: 18px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.new-conversation-cta__button:disabled,
|
|
288
|
+
.new-conversation-cta__button[aria-disabled='true'] {
|
|
289
|
+
opacity: 0.45;
|
|
290
|
+
cursor: not-allowed;
|
|
291
|
+
border-color: #b6c5cf;
|
|
292
|
+
color: #7b8a95;
|
|
293
|
+
}
|
|
243
294
|
`;
|
|
@@ -7,6 +7,8 @@ const threePointsIconUrl = new URL('../../assets/icons/threePoints.png', import.
|
|
|
7
7
|
const editIconUrl = new URL('../../assets/icons/edit.png', import.meta.url).href;
|
|
8
8
|
const trashIconUrl = new URL('../../assets/icons/trash.png', import.meta.url).href;
|
|
9
9
|
const searchIconUrl = new URL('../../assets/icons/searchIcon.png', import.meta.url).href;
|
|
10
|
+
const plusFileSelectionUrl = new URL('../../assets/icons/plusFileSelection.png', import.meta.url)
|
|
11
|
+
.href;
|
|
10
12
|
|
|
11
13
|
type ConversationsPanelVariant = 'drawer' | 'sidebar';
|
|
12
14
|
|
|
@@ -47,6 +49,28 @@ const renderConversationSurface = (
|
|
|
47
49
|
) => {
|
|
48
50
|
const isSidebar = variant === 'sidebar';
|
|
49
51
|
|
|
52
|
+
const newConversationCta = isSidebar
|
|
53
|
+
? html`
|
|
54
|
+
<div
|
|
55
|
+
class=${classMap({
|
|
56
|
+
'new-conversation-cta': true,
|
|
57
|
+
open: component.showNewConversationShortcut,
|
|
58
|
+
})}
|
|
59
|
+
>
|
|
60
|
+
<button
|
|
61
|
+
type="button"
|
|
62
|
+
class="new-conversation-cta__button"
|
|
63
|
+
?disabled=${!component.hasActiveConversation}
|
|
64
|
+
aria-disabled=${!component.hasActiveConversation}
|
|
65
|
+
@click=${() => component.handleCreateConversation()}
|
|
66
|
+
>
|
|
67
|
+
<img src=${plusFileSelectionUrl} alt="" aria-hidden="true" />
|
|
68
|
+
<span>Iniciar nova conversa</span>
|
|
69
|
+
</button>
|
|
70
|
+
</div>
|
|
71
|
+
`
|
|
72
|
+
: null;
|
|
73
|
+
|
|
50
74
|
const list = html`
|
|
51
75
|
<div
|
|
52
76
|
class=${classMap({
|
|
@@ -109,6 +133,8 @@ const renderConversationSurface = (
|
|
|
109
133
|
`;
|
|
110
134
|
|
|
111
135
|
return html`
|
|
136
|
+
${newConversationCta}
|
|
137
|
+
|
|
112
138
|
<div class="conversation-search">
|
|
113
139
|
<img class="search-icon" src=${searchIconUrl} alt="" aria-hidden="true" />
|
|
114
140
|
<input
|
|
@@ -134,6 +160,14 @@ const renderConversationSurface = (
|
|
|
134
160
|
'conversation-scrollbar--visible':
|
|
135
161
|
component.conversationScrollbar.visible,
|
|
136
162
|
})}
|
|
163
|
+
@pointerdown=${(event: PointerEvent) =>
|
|
164
|
+
component.handleConversationScrollbarPointerDown(event)}
|
|
165
|
+
@pointermove=${(event: PointerEvent) =>
|
|
166
|
+
component.handleConversationScrollbarPointerMove(event)}
|
|
167
|
+
@pointerup=${(event: PointerEvent) =>
|
|
168
|
+
component.handleConversationScrollbarPointerUp(event)}
|
|
169
|
+
@pointercancel=${(event: PointerEvent) =>
|
|
170
|
+
component.handleConversationScrollbarPointerUp(event)}
|
|
137
171
|
>
|
|
138
172
|
<span
|
|
139
173
|
class="conversation-scrollbar__thumb"
|
|
@@ -86,9 +86,40 @@ export const fullscreenStyles = css`
|
|
|
86
86
|
letter-spacing: 0;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
.fullscreen-header__brand-row {
|
|
90
|
+
display: inline-flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
gap: 8px;
|
|
93
|
+
width: 100%;
|
|
94
|
+
justify-content: space-between;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.fullscreen-header__brand-toggle {
|
|
98
|
+
border: none;
|
|
99
|
+
background: transparent;
|
|
100
|
+
width: 40px;
|
|
101
|
+
height: 40px;
|
|
102
|
+
border-radius: 50%;
|
|
103
|
+
display: grid;
|
|
104
|
+
place-items: center;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
color: #1f2f36;
|
|
107
|
+
transition: transform 0.2s ease, background-color 0.2s ease;
|
|
108
|
+
margin-left: auto;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.fullscreen-header__brand-toggle--open {
|
|
112
|
+
transform: rotate(180deg);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.fullscreen-header__brand-toggle svg {
|
|
116
|
+
width: 18px;
|
|
117
|
+
height: 18px;
|
|
118
|
+
}
|
|
119
|
+
|
|
89
120
|
.fullscreen-header__tab {
|
|
90
121
|
font-size: 13px;
|
|
91
|
-
font-weight:
|
|
122
|
+
font-weight: 700;
|
|
92
123
|
letter-spacing: 1px;
|
|
93
124
|
color: #1f2f36;
|
|
94
125
|
text-transform: uppercase;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
2
3
|
import type { RioAssistWidget } from '../rio-assist/rio-assist';
|
|
3
4
|
import { renderConversationsPanel } from '../conversations-panel/conversations-panel.template';
|
|
4
5
|
import { renderChatSurface } from '../mini-panel/mini-panel.template';
|
|
@@ -39,7 +40,30 @@ export const renderFullscreen = (component: RioAssistWidget) => {
|
|
|
39
40
|
<div class="fullscreen-shell__content">
|
|
40
41
|
<header class="fullscreen-header">
|
|
41
42
|
<div class="fullscreen-header__title">
|
|
42
|
-
<
|
|
43
|
+
<div class="fullscreen-header__brand-row">
|
|
44
|
+
<span class="fullscreen-header__brand">RIO INSIGHT</span>
|
|
45
|
+
<button
|
|
46
|
+
type="button"
|
|
47
|
+
class=${classMap({
|
|
48
|
+
'fullscreen-header__brand-toggle': true,
|
|
49
|
+
'fullscreen-header__brand-toggle--open':
|
|
50
|
+
component.showNewConversationShortcut,
|
|
51
|
+
})}
|
|
52
|
+
aria-label="Alternar ações de conversa"
|
|
53
|
+
@click=${() => component.toggleNewConversationShortcut()}
|
|
54
|
+
>
|
|
55
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
56
|
+
<path
|
|
57
|
+
d="M6 9l6 6 6-6"
|
|
58
|
+
fill="none"
|
|
59
|
+
stroke="currentColor"
|
|
60
|
+
stroke-width="2"
|
|
61
|
+
stroke-linecap="round"
|
|
62
|
+
stroke-linejoin="round"
|
|
63
|
+
/>
|
|
64
|
+
</svg>
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
43
67
|
</div>
|
|
44
68
|
|
|
45
69
|
<div class="fullscreen-header__tabs">
|
|
@@ -8,7 +8,7 @@ export const miniPanelStyles = css`
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.panel {
|
|
11
|
-
--header-height:
|
|
11
|
+
--header-height: 115px;
|
|
12
12
|
pointer-events: auto;
|
|
13
13
|
position: fixed;
|
|
14
14
|
top: 0;
|
|
@@ -227,7 +227,7 @@ export const miniPanelStyles = css`
|
|
|
227
227
|
color: #a7afbb;
|
|
228
228
|
margin-bottom: 12px;
|
|
229
229
|
font-family: 'Source Sans Pro', 'Inter', sans-serif;
|
|
230
|
-
font-weight:
|
|
230
|
+
font-weight: 600;
|
|
231
231
|
letter-spacing: 0;
|
|
232
232
|
}
|
|
233
233
|
|
|
@@ -241,7 +241,7 @@ export const miniPanelStyles = css`
|
|
|
241
241
|
min-height: 24px;
|
|
242
242
|
color: #a7afbb;
|
|
243
243
|
font-family: 'Source Sans Pro', 'Inter', sans-serif;
|
|
244
|
-
font-weight:
|
|
244
|
+
font-weight: 600;
|
|
245
245
|
white-space: nowrap;
|
|
246
246
|
}
|
|
247
247
|
|
|
@@ -321,11 +321,15 @@ export const miniPanelStyles = css`
|
|
|
321
321
|
|
|
322
322
|
.close-button {
|
|
323
323
|
background: transparent;
|
|
324
|
+
border: none;
|
|
324
325
|
display: grid;
|
|
325
326
|
place-items: center;
|
|
326
327
|
color: #9ba5b2;
|
|
327
|
-
font-size:
|
|
328
|
+
font-size: 20px;
|
|
328
329
|
font-weight: 600;
|
|
329
330
|
line-height: 1;
|
|
331
|
+
width: 24px;
|
|
332
|
+
height: 24px;
|
|
333
|
+
margin-right: 12px;
|
|
330
334
|
}
|
|
331
335
|
`;
|
|
@@ -68,7 +68,7 @@ export const renderChatSurface = (component: RioAssistWidget) => {
|
|
|
68
68
|
${component.suggestions.length > 0
|
|
69
69
|
? html`
|
|
70
70
|
<div class="suggestions-wrapper">
|
|
71
|
-
<p class="suggestions-label">
|
|
71
|
+
<p class="suggestions-label">Sugestões de Perguntas</p>
|
|
72
72
|
<div class="suggestions">
|
|
73
73
|
${component.suggestions.map(
|
|
74
74
|
(suggestion) => html`
|
|
@@ -120,7 +120,7 @@ export const renderMiniPanel = (component: RioAssistWidget) => {
|
|
|
120
120
|
<button
|
|
121
121
|
class="close-button"
|
|
122
122
|
@click=${() => component.handleCloseAction()}
|
|
123
|
-
aria-label="Fechar
|
|
123
|
+
aria-label="Fechar Rio Insight"
|
|
124
124
|
>
|
|
125
125
|
x
|
|
126
126
|
</button>
|