rio-assist-widget 0.1.6 → 0.1.8

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 (9) hide show
  1. package/dist/rio-assist.js +71 -49
  2. package/index.html +9 -17
  3. package/package.json +1 -1
  4. package/src/components/conversations-panel/conversations-panel.styles.ts +300 -294
  5. package/src/components/conversations-panel/conversations-panel.template.ts +184 -184
  6. package/src/components/fullscreen/fullscreen.styles.ts +185 -178
  7. package/src/components/mini-panel/mini-panel.styles.ts +346 -337
  8. package/src/components/mini-panel/mini-panel.template.ts +1 -1
  9. package/src/components/rio-assist/rio-assist.ts +281 -255
package/src/components/mini-panel/mini-panel.styles.ts CHANGED
@@ -1,337 +1,346 @@
1
- import { css } from 'lit';
2
-
3
- export const miniPanelStyles = css`
4
- .canvas {
5
- position: absolute;
6
- inset: 0;
7
- pointer-events: none;
8
- }
9
-
10
- .panel {
11
- --header-height: 115px;
12
- pointer-events: auto;
13
- position: fixed;
14
- top: 0;
15
- right: 0;
16
- height: 100vh;
17
- width: min(600px, 100vw);
18
- max-width: 90vw;
19
- background: #fff;
20
- box-shadow: -24px 0 48px rgba(0, 0, 0, 0.15);
21
- transform: translateX(100%);
22
- transition: transform 0.35s ease;
23
- display: flex;
24
- flex-direction: column;
25
- overflow: hidden;
26
- }
27
-
28
- .panel.open {
29
- transform: translateX(0);
30
- }
31
-
32
- .panel-header {
33
- display: flex;
34
- flex-direction: column;
35
- gap: 16px;
36
- padding: 20px 8px 15px 28px;
37
- border-bottom: 1px solid #e4eaee;
38
- }
39
-
40
- .panel-header__top {
41
- display: flex;
42
- justify-content: space-between;
43
- align-items: center;
44
- width: 100%;
45
- }
46
-
47
- .panel-title {
48
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
49
- font-size: 16px;
50
- font-weight: 600;
51
- letter-spacing: 0;
52
- color: #1c2a33;
53
- padding-left: 0px;
54
- }
55
-
56
- .panel-header__actions {
57
- display: flex;
58
- justify-content: space-between;
59
- align-items: center;
60
- width: 100%;
61
- }
62
-
63
- .conversations-button {
64
- display: inline-flex;
65
- align-items: center;
66
- gap: 12px;
67
- padding: 8px 0;
68
- padding-left: 0px;
69
- border: none;
70
- background: transparent;
71
- color: #008b9a;
72
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
73
- font-weight: 600;
74
- font-size: 16px;
75
- }
76
-
77
- .conversations-button img {
78
- width: 24px;
79
- height: 24px;
80
- }
81
-
82
- .panel-header__icons {
83
- display: inline-flex;
84
- gap: 16px;
85
- align-items: center;
86
- padding-right: 12px;
87
- }
88
-
89
- .panel-header__icon-button {
90
- width: 32px;
91
- height: 32px;
92
- border-radius: 50%;
93
- border: none;
94
- background: transparent;
95
- display: grid;
96
- place-items: center;
97
- }
98
-
99
- .conversations-plus-button {
100
- margin-right: 4px;
101
- }
102
-
103
- .panel-header__icon-button img {
104
- width: 28px;
105
- height: 28px;
106
- }
107
-
108
- .panel-body {
109
- flex: 1;
110
- padding: 48px 32px 12px;
111
- display: flex;
112
- flex-direction: column;
113
- align-items: center;
114
- gap: 16px;
115
- max-width: 520px;
116
- margin: 0 auto;
117
- width: 100%;
118
- min-height: 0;
119
- overflow: hidden;
120
- }
121
-
122
- .panel-content {
123
- flex: 1;
124
- width: 100%;
125
- overflow-y: auto;
126
- }
127
-
128
- .panel-content--empty {
129
- display: flex;
130
- align-items: center;
131
- justify-content: center;
132
- }
133
-
134
- .hero-card {
135
- flex: 1;
136
- display: flex;
137
- align-items: center;
138
- justify-content: center;
139
- flex-direction: column;
140
- gap: 24px;
141
- color: #25323d;
142
- text-align: center;
143
- width: 100%;
144
- max-width: 360px;
145
- min-height: 280px;
146
- }
147
-
148
- .hero-card__icon {
149
- width: 120px;
150
- height: 120px;
151
- display: block;
152
- margin-bottom: 8px;
153
- }
154
-
155
- .hero-card h3 {
156
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
157
- font-weight: 400;
158
- font-size: 32px;
159
- line-height: 1;
160
- white-space: nowrap;
161
- color: #2a3740;
162
- margin: 0;
163
- }
164
-
165
- .conversation {
166
- width: 100%;
167
- display: flex;
168
- flex-direction: column;
169
- gap: 16px;
170
- }
171
-
172
- .message {
173
- border-radius: 16px;
174
- border: 1px solid #e4eaee;
175
- padding: 12px 16px;
176
- max-width: 90%;
177
- background: #fff;
178
- color: #1f2f36;
179
- font-size: 15px;
180
- }
181
-
182
- .message--user {
183
- align-self: flex-end;
184
- background: #e3f3f6;
185
- border-color: #cde6ea;
186
- color: #00596b;
187
- }
188
-
189
- .message time {
190
- display: block;
191
- font-size: 11px;
192
- margin-top: 6px;
193
- color: #8a98a4;
194
- text-align: right;
195
- }
196
-
197
- .typing {
198
- font-style: italic;
199
- opacity: 0.75;
200
- }
201
-
202
- .panel-footer {
203
- width: 100%;
204
- display: flex;
205
- flex-direction: column;
206
- align-items: center;
207
- gap: 12px;
208
- padding-top: 8px;
209
- margin-top: auto;
210
- }
211
-
212
- .suggestions {
213
- display: inline-flex;
214
- gap: 12px;
215
- justify-content: center;
216
- }
217
-
218
- .suggestions-wrapper {
219
- width: 100%;
220
- text-align: center;
221
- margin-bottom: 6px;
222
- }
223
-
224
- .suggestions-label {
225
- text-align: center;
226
- font-size: 14px;
227
- color: #a7afbb;
228
- margin-bottom: 12px;
229
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
230
- font-weight: 600;
231
- letter-spacing: 0;
232
- }
233
-
234
- .suggestion {
235
- border-radius: 999px;
236
- border: 1px solid #d6e2e6;
237
- padding: 0 16px;
238
- background: #fff;
239
- font-size: 14px;
240
- line-height: 24px;
241
- min-height: 24px;
242
- color: #a7afbb;
243
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
244
- font-weight: 600;
245
- white-space: nowrap;
246
- }
247
-
248
- form {
249
- display: flex;
250
- align-items: center;
251
- gap: 12px;
252
- border: 1px solid #a4afbb;
253
- border-radius: 80px;
254
- padding: 10px 20px;
255
- background: #fff;
256
- width: 100%;
257
- max-width: 520px;
258
- margin-bottom: 0;
259
- max-height: 56px;
260
- }
261
-
262
- form input {
263
- border: none;
264
- flex: 1;
265
- font: inherit;
266
- outline: none;
267
- font-size: 16px;
268
- font-style: normal;
269
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
270
- font-weight: 400;
271
- }
272
-
273
- form input::placeholder {
274
- font-style: italic;
275
- font-size: 16px;
276
- color: #a7afbb;
277
- }
278
-
279
- .input-button {
280
- width: 32px;
281
- height: 32px;
282
- border-radius: 50%;
283
- border: none;
284
- background: transparent;
285
- display: flex;
286
- align-items: center;
287
- justify-content: center;
288
- }
289
-
290
- .input-button img {
291
- width: 32px;
292
- height: 32px;
293
- }
294
-
295
- .input-button:disabled {
296
- opacity: 0.5;
297
- cursor: not-allowed;
298
- }
299
-
300
- .footnote {
301
- margin-top: 0;
302
- padding-top: 0;
303
- padding-bottom: 0;
304
- font-size: 12px;
305
- color: #8a98a4;
306
- text-align: center;
307
- max-width: 520px;
308
- margin-left: auto;
309
- margin-right: auto;
310
- }
311
-
312
- .error-banner {
313
- width: 100%;
314
- padding: 10px 14px;
315
- border-radius: 12px;
316
- background: #fff4f2;
317
- color: #a33c3c;
318
- font-size: 13px;
319
- text-align: center;
320
- }
321
-
322
- .close-button {
323
- background: transparent;
324
- border: none;
325
- display: grid;
326
- place-items: center;
327
- width: 24px;
328
- height: 24px;
329
- margin-right: 12px;
330
- padding: 0;
331
- }
332
-
333
- .close-button img {
334
- width: 16px;
335
- height: 16px;
336
- }
337
- `;
1
+ import { css } from 'lit';
2
+
3
+ export const miniPanelStyles = css`
4
+ .canvas {
5
+ position: absolute;
6
+ inset: 0;
7
+ pointer-events: none;
8
+ }
9
+
10
+ .panel {
11
+ --header-height: 115px;
12
+ pointer-events: auto;
13
+ position: fixed;
14
+ top: 0;
15
+ right: 0;
16
+ height: 100vh;
17
+ width: min(600px, 100vw);
18
+ max-width: 90vw;
19
+ background: #fff;
20
+ box-shadow: -24px 0 48px rgba(0, 0, 0, 0.15);
21
+ transform: translateX(100%);
22
+ transition: transform 0.35s ease;
23
+ display: flex;
24
+ flex-direction: column;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .panel.open {
29
+ transform: translateX(0);
30
+ }
31
+
32
+ .panel-header {
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 16px;
36
+ padding: 20px 8px 15px 28px;
37
+ border-bottom: 1px solid #e4eaee;
38
+ }
39
+
40
+ .panel-header__top {
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ width: 100%;
45
+ }
46
+
47
+ .panel-title {
48
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
49
+ font-size: 16px;
50
+ font-weight: 600;
51
+ letter-spacing: 0;
52
+ color: #1c2a33;
53
+ padding-left: 0px;
54
+ }
55
+
56
+ .panel-header__actions {
57
+ display: flex;
58
+ justify-content: space-between;
59
+ align-items: center;
60
+ width: 100%;
61
+ }
62
+
63
+ .conversations-button {
64
+ display: inline-flex;
65
+ align-items: center;
66
+ gap: 12px;
67
+ padding: 8px 0;
68
+ padding-left: 0px;
69
+ border: none;
70
+ background: transparent;
71
+ color: #008b9a;
72
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
73
+ font-weight: 600;
74
+ font-size: 16px;
75
+ }
76
+
77
+ .conversations-button img {
78
+ width: 24px;
79
+ height: 24px;
80
+ }
81
+
82
+ .panel-header__icons {
83
+ display: inline-flex;
84
+ gap: 16px;
85
+ align-items: center;
86
+ padding-right: 12px;
87
+ }
88
+
89
+ .panel-header__icon-button {
90
+ width: 32px;
91
+ height: 32px;
92
+ border-radius: 50%;
93
+ border: none;
94
+ background: transparent;
95
+ display: grid;
96
+ place-items: center;
97
+ }
98
+
99
+ .conversations-plus-button {
100
+ margin-right: 4px;
101
+ }
102
+
103
+ .panel-header__icon-button img {
104
+ width: 28px;
105
+ height: 28px;
106
+ }
107
+
108
+ .panel-body {
109
+ flex: 1;
110
+ padding: 48px 32px 12px;
111
+ display: flex;
112
+ flex-direction: column;
113
+ align-items: center;
114
+ gap: 16px;
115
+ max-width: 520px;
116
+ margin: 0 auto;
117
+ width: 100%;
118
+ min-height: 0;
119
+ overflow: hidden;
120
+ }
121
+
122
+ .panel-content {
123
+ flex: 1;
124
+ width: 100%;
125
+ overflow-y: auto;
126
+ }
127
+
128
+ .panel-content--empty {
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ }
133
+
134
+ .hero-card {
135
+ flex: 1;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ flex-direction: column;
140
+ gap: 24px;
141
+ color: #25323d;
142
+ text-align: center;
143
+ width: 100%;
144
+ max-width: 360px;
145
+ min-height: 280px;
146
+ }
147
+
148
+ .hero-card__icon {
149
+ width: 120px;
150
+ height: 120px;
151
+ display: block;
152
+ margin-bottom: 8px;
153
+ }
154
+
155
+ .hero-card h3 {
156
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
157
+ font-weight: 400;
158
+ font-size: 32px;
159
+ line-height: 1;
160
+ white-space: nowrap;
161
+ color: #2a3740;
162
+ margin: 0;
163
+ }
164
+
165
+ .conversation {
166
+ width: 100%;
167
+ display: flex;
168
+ flex-direction: column;
169
+ gap: 12px;
170
+ }
171
+
172
+ .message {
173
+ border-radius: 16px;
174
+ border: 1px solid #e4eaee;
175
+ padding: 10px 16px;
176
+ max-width: 90%;
177
+ background: #fff;
178
+ color: #1f2f36;
179
+ font-size: 15px;
180
+ }
181
+
182
+ .message p {
183
+ margin: 0;
184
+ line-height: 1.35;
185
+ }
186
+
187
+ .message--user {
188
+ align-self: flex-end;
189
+ background: #e5ebf0;
190
+ border-color: #cfd6dc;
191
+ color: #1f2f36;
192
+ padding: 8px 10px;
193
+ }
194
+
195
+ .message time {
196
+ display: block;
197
+ font-size: 11px;
198
+ color: #8a98a4;
199
+ text-align: right;
200
+ }
201
+
202
+ .typing {
203
+ font-style: italic;
204
+ opacity: 0.75;
205
+ }
206
+
207
+ .message--user time {
208
+ margin-top: 3px;
209
+ }
210
+
211
+ .panel-footer {
212
+ width: 100%;
213
+ display: flex;
214
+ flex-direction: column;
215
+ align-items: center;
216
+ gap: 12px;
217
+ padding-top: 8px;
218
+ margin-top: auto;
219
+ }
220
+
221
+ .suggestions {
222
+ display: inline-flex;
223
+ gap: 12px;
224
+ justify-content: center;
225
+ }
226
+
227
+ .suggestions-wrapper {
228
+ width: 100%;
229
+ text-align: center;
230
+ margin-bottom: 6px;
231
+ }
232
+
233
+ .suggestions-label {
234
+ text-align: center;
235
+ font-size: 14px;
236
+ color: #a7afbb;
237
+ margin-bottom: 12px;
238
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
239
+ font-weight: 600;
240
+ letter-spacing: 0;
241
+ }
242
+
243
+ .suggestion {
244
+ border-radius: 999px;
245
+ border: 1px solid #d6e2e6;
246
+ padding: 0 16px;
247
+ background: #fff;
248
+ font-size: 14px;
249
+ line-height: 24px;
250
+ min-height: 24px;
251
+ color: #a7afbb;
252
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
253
+ font-weight: 600;
254
+ white-space: nowrap;
255
+ }
256
+
257
+ form {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 12px;
261
+ border: 1px solid #a4afbb;
262
+ border-radius: 80px;
263
+ padding: 10px 20px;
264
+ background: #fff;
265
+ width: 100%;
266
+ max-width: 520px;
267
+ margin-bottom: 0;
268
+ max-height: 56px;
269
+ }
270
+
271
+ form input {
272
+ border: none;
273
+ flex: 1;
274
+ font: inherit;
275
+ outline: none;
276
+ font-size: 16px;
277
+ font-style: normal;
278
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
279
+ font-weight: 400;
280
+ }
281
+
282
+ form input::placeholder {
283
+ font-style: italic;
284
+ font-size: 16px;
285
+ color: #a7afbb;
286
+ }
287
+
288
+ .input-button {
289
+ width: 32px;
290
+ height: 32px;
291
+ border-radius: 50%;
292
+ border: none;
293
+ background: transparent;
294
+ display: flex;
295
+ align-items: center;
296
+ justify-content: center;
297
+ }
298
+
299
+ .input-button img {
300
+ width: 32px;
301
+ height: 32px;
302
+ }
303
+
304
+ .input-button:disabled {
305
+ opacity: 0.5;
306
+ cursor: not-allowed;
307
+ }
308
+
309
+ .footnote {
310
+ margin-top: 0;
311
+ padding-top: 0;
312
+ padding-bottom: 0;
313
+ font-size: 12px;
314
+ color: #8a98a4;
315
+ text-align: center;
316
+ max-width: 520px;
317
+ margin-left: auto;
318
+ margin-right: auto;
319
+ }
320
+
321
+ .error-banner {
322
+ width: 100%;
323
+ padding: 10px 14px;
324
+ border-radius: 12px;
325
+ background: #fff4f2;
326
+ color: #a33c3c;
327
+ font-size: 13px;
328
+ text-align: center;
329
+ }
330
+
331
+ .close-button {
332
+ background: transparent;
333
+ border: none;
334
+ display: grid;
335
+ place-items: center;
336
+ width: 24px;
337
+ height: 24px;
338
+ margin-right: 12px;
339
+ padding: 0;
340
+ }
341
+
342
+ .close-button img {
343
+ width: 16px;
344
+ height: 16px;
345
+ }
346
+ `;
package/src/components/mini-panel/mini-panel.template.ts CHANGED
@@ -43,7 +43,7 @@ export const renderChatSurface = (component: RioAssistWidget) => {
43
43
  ${component.isLoading
44
44
  ? html`
45
45
  <div class="message message--assistant typing">
46
- <span>IA está respondendo...</span>
46
+ <span>Rio Insight está respondendo...</span>
47
47
  </div>
48
48
  `
49
49
  : null}